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Charles Wyke-Smith 


一 直 从 事 媒体 相关 工作 。20 世 纪 80 年 代 中 
期 ， 他 与 人 在 旧金山 共同 创办 了 PRINTZ 
Electronic _ Design， 当时 这 可 是 一 家 全 部 工作 
都 使 用 计算 机 处 理 的 设计 工作 室 。 另 外 ， 他 曾 
在 富国 银行 、ESPN 电 子 游 戏 担任 领导 和 顾 
问 ， 在 Benefitfocus 公 司 担任 过 用 户 体 验 总 
AN 
司 ， 提 供 人 力 资源 服务 。 目 前 ， 他 是 一 家 新 的 
创业 公司 Bublish 的 CEO ， 这 家 公司 提供 图 书 
策划 等 方面 的 服务 。 

Charles 是 一 位 乐 手 和 多 本 Web 开 发 图 书 的 作 
者 ， 除 了 本 书 ， 他 还 著 有 Cooain'forthe Web: A 
Designer' s Guide to Developing Dynamic Web 
Sites, Scriptin’ with JavaScript and AJAX: A 
Designer' s Guidea Visual Stylin’? with CSS3。 
他 和 妻子 ， 还 有 两 个 女儿 住 在 美国 南 卡 罗 来 纳 
州 查尔斯 顿 市 。 
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李 松 峰 AN 
图 灵 公 司 QA 部 主任 。2006 年 起 投身 翻译 ， 译 
有 20 余 部 图 书 。2008 年 进入 出 版 业 ， 从 事 技 
术 图 书 编辑 和 审 稿 工作 。 
2007 年 创立 知识 分 享 网 站 “为 之 漫笔 ” 
(cn-cuckoo.com ) ， 翻 译 了 大 量 国外 经 典 技 
术 文 章 。2012 年 下 半年 创立 “A List Apart 中 
文 版 ”站 点 ( alistapart.cn ) ， 旨 在 向 中 文 读 
者 译 介 这 一 国际 顶级 Web 设 计 与 开发 杂志 。 他 
经 常 参加 技术 社区 活动 ， 曾 在 w3ctech 2012 
Mobile 上 分 享 “Dive into Responsive Web 
Design”。2013 年 1 月 受 邀 在 金山 网 络 分 享 
“响应 式 Web 设 计 ”，2013 年 3 月 应 邀 在 奇 虎 
360 分 享 “JS 的 国 ”。 
目前 正在 翻译 Unix 葛 基 人 Brian Kernighan 的 新 
书 D is for Digital; 
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内 容 提 要 


本 书 是 一 本 面向 初中 级 读者 的 经 典 设 计 指 南 。 全 书 共 分 8 章 ,前 4 章 分 别 介绍 了 HIML 标记 和 文档 结构 、 
CSS 工作 原理 、 定 位 元 素 、 字 体 和 文本 ,对 规则 、 声 明 、 层 羡 、 特 指 度 、 选 择 符 等 基本 概念 进行 了 详细 解读 。 
随后 4 章 介绍 了 页 面 布 局 、 界 面 组 件 ，CSS3 圆 角 、 阴 影 、 渐 变 、 多 背景 等 视觉 设计 技巧 ， 最 后 还 对 如 何 实 
现 最 前 沿 的 响应 式 设计 进行 了 通俗 易 懂 的 演示 。 

本 书 适合 CSS 初中 级 读者 阅读 。 
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两 个 “之 最 ”《〈 译 者 序 ) 





或 许 你 不 敢 相信 , 这 本 书 创下 了 不 少 “ 之 最 ”。 虽然 只 能 说 是 我 自己 经 历 过 的 “之 最 ”， 
但 说 不 定 它们 也 是 “中 国之 最 ”， 甚 至 “世界 之 最 ”。 


首先 ， 这 是 翻译 遍 数 最 多 的 一 本 书 。2006 年 ， 我 翻译 了 本 书 第 1 版 。 当 时 是 为 了 学 
习 翻 译 而 翻译 ， 并 没有 出 版 (也 没有 出 版 社 引 进 )， 翻 译 稿 至 今 仍 静 静 地 躺 在 电脑 硬 
盘 的 “翻译 档案 ”里 。2008 年 ， 图 灵 引 进 了 本 书 第 2 版 ， 于 是 我 作为 译 者 ， 第 二 次 
重新 翻译 了 这 本 书 。 结 果 就 是 受到 读者 好 评 的 《 写 给 大 家 看 的 CSS 书 (第 2 版 )》 
2012 年， 本 书 第 3 版 面世 ， 由 于 内 容 更 新 超过 80%， 所 以 我 又 一 次 重新 翻译 了 它 。 
现在 ， 这 本 书 的 全 稿 已 经 跟 读者 〈 至 少 是 购买 电子 版 的 读者 ) 见面 了 。 但 鲜 为 人 知 
的 是 ， 我 在 近 7 年 的 时 间 内 ， 翻 译 了 这 本 书 的 三 个 版 本 。 同 一 本 书 ， 三 个 版 本 ， 每 
一 版 都 翻译 一 遍 ， 这 在 我 的 翻译 生涯 里 是 绝无仅有 的 ， 是 为 “最 多 ”。 


其 次 ， 这 是 翻译 模式 最 新 的 一 本 书 。 这 本 书 采 用 了 在 线 翻译 、 按 章 发 布 的 模式 。 所 
谓 按 章 发 布 ， 就 是 翻译 一 章 、 编 辑 一 童 、 发 布 一 章 。 对 于 购买 了 电子 版 的 读者 ， 这 
种 模式 不 仅 大 大 缩短 了 出 版 周期 ， 而 且 使 翻译 过 程 充满 互动 性 。 传 统 纸 质 书 从 开始 
翻译 到 最 终 印 刷 上 市 ， 一 般 都 需要 6 个 月 以 上 的 时 间 ， 有 的 甚至 更 长 。 这 么 长 的 周 
期 内 ， 译 者 、 编 辑 与 读者 “不 见面 "， 翻 译 质量 如 何 ， 内 容 有 没有 吸引 力 ， 读 者 全 然 
不 知 。 按 童 发 布 之 后 ， 对 读者 来 说 ， 可 以 更 早 地 、 同 步 地 读 到 新 书 ， 掌 握 新 知识 ; 
对 出 版 方 而 言 ， 则 向 前 延长 了 图 书 的 寿命 。 更 重要 的 是 ， 这 为 译 者 、 编 辑 与 读者 的 
交流 和 互动 提供 了 可 能 。 这 种 模式 对 于 我 而 言 是 前 所 未 有 的 ， 是 为 “最 新 ”。 


按 章 发 布 是 一 种 敏捷 出 版 实践 。 敏 捷 软件 开发 讲究 快速 迭代 、 持 续 交 付 。 套 用 在 敏 
捷 出 版 上 ， 就 是 译 、 编 、 读 每 章 都 会 有 迭代 ， 而 全 书 内 容 以 章 为 单位 持续 地 交付 给 
读者 。 具 体 来 说 ， 每 一 次 迭代 从 交付 每 一 童 的 内 容 开 始 。 作 为 译 者 ， 我 会 在 交付 每 
一 章 的 时 候 写 一 段 简短 的 导读 文字 ， 概 述 一 章 的 看 点 和 精彩 之 处 ， 通 过 社区 消息 系 



















































































































































































两 个 “之 最 ”( 译 者 序 ) 





统 群 发 给 所 有 读者 。 读 者 在 阅读 期 间 ， 会 反馈 勘误 或 者 留 下 读书 笔记 。 勘 误 信 息 可 
以 立即 得 到 纠正 ， 从 而 减少 将 来 印 在 纸 质 书 中 的 错误 。 而 读书 笔记 则 有 助 于 增进 读 
者 间 的 互动 ， 加 深 读者 对 内 容 的 理解 。 从 读者 反馈 来 看 ， 这 种 模式 较 传统 出 版 模式 
是 一 个 非常 大 的 进步 ， 得 到 了 读者 的 认可 。 比 如 ， 读 者 cisolarix 就 说 :“ 及 时 对 读者 
进行 响应 ， 很 赞 啊 。 比 传统 的 出 版 方式 好 多 了 。” 


从 某 种 意义 上 讲 ， 说 这 本 书 是 参与 翻译 人 数 最 多 的 一 本 也 不 为 过 。 为 此 ， 我 把 写 这 
篇 译 者 序 时 给 这 本 书 留 言 的 读者 列 出 来 ,感谢 他 (她) 们 提出 的 勘误 、 对 本 书 的 肯 
定 和 敢于 留 下 自己 的 “手迹 ”: 





nikogu, cisolarix 、 北 秋 、 小 杜 、  ituring, ml1a0, /|3 igoogler, Ivan Yan, newiuce, 
Jimmy *F, MF. langford, karaschee, i/i, vKELS T, acmerfight, Lemoncolaz, 
larrycai, level55 474, fejustin, RERIN EJ, zhangweifang, K5, hidoos, rocflytosky , 
no particular, xzhbao , hidoos , zhaoshuxiang , Pippola! , ivanzhaowy , karaschee , lyuehh , 


陈 陆 扬 


当然 ， 这 里 边 要 特别 感谢 一 位 读者 : 流年 。 他 在 阅读 过 程 中 写 下 了 很 多 心得 体会 ， 
为 其 他 读者 提供 了 拓展 性 知识 。 他 的 留言 让 我 反思 : 中 国 读者 实际 上 不 是 不 善于 交 
流 ， 而 是 对 基础 知识 掌握 不 够 牢固 ， 不 敢 交 流 。 就 如 同 有 人 提 到 用 英文 写作 时 所 说 
的 ， 最 难 的 不 是 怎么 写 ， 而 是 写 什 么 。 英 文 语法 错误 其 实 是 别人 容易 纠正 的 ， 但 你 
到 底 想 要 表达 什么 则 是 别人 无 法 知道 的 。 具 体 到 CSS ， 虽 然 不 难 学， 但 真正 彻底 把 
原理 和 基本 概念 全 搞 通 也 不 是 件 容 易 的 事 。 如 果 你 想 让 自己 真正 掌握 CSS, PUB 
就 是 一 个 不 错 的 起 点 。 
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对 网 页 设计 师 来 说 ， 这 是 一 个 激动 人 心 的 时 刻 ! 互联 网 已 经 吉 括 了 几乎 所 有 媒体 ， 
AREI, CD 和 DVD 已 经 被 Hulu、Netfix、Pandora 和 Spotify 等 这 些 按 需 取 用 的 
在 线 服务 取代 。 

当然 ， 访 问 这 些 媒体 的 设备 同样 异彩 纷呈 。 有 传统 的 台式 电脑 、 笔 记 本 电脑 ， 还 有 
平板 电脑 、 智 能手 机， 甚至 60 英寸 的 大 屏幕 电视 。 

而 保障 所 有 这 些 设 备 和 媒体 顺畅 运作 ， 有 一 套 全 新 的 技术 标准 : HTMLS, CSS3 和 


JavaScript. 








五 年 前 ， 在 写作 本 书 第 2 版 的 时 候 ， 曾 经 出 现 过 一 种 死板 又 复杂 的 HTML 标准 
基于 XML 的 XHTML。 由 于 XHTML 难以 适应 千变万化 和 快速 发 展 的 互联 网 开发 需 
求 ， 苹 果 、 谋 智和 欧 朋 联手 组 建 了 Web Hypertext Application Technology Working 
Group ( WHATWG, Web 超 文本 应 用 技术 工作 组 )。 这 个 组 织 的 宗旨， 就 是 让 W3C 
为 推广 XHTML 标准 而 抛弃 的 HTML 4 起死回生 。 然 后 ， 我 们 就 看 到 了 涅 盘 重 生 的 
HTML5。 过 去 三 年 间 ，HTMLS5 迅速 取代 XHTML, F Web 设计 与 开发 领域 获得 了 
广泛 认同 。 

HTMLS 是 为 今天 的 多 媒体 互联 网 而 生 的 ， 因 此 它 提供 了 一 整套 API LER, E 
频 、 图 形 、 地 理 定位 、 数 据 存 储 等 等 。HTML5 还 为 结构 化 文档 提供 了 很 多 新 的 元 素 
(section、article、nav， 等 等 )。 而 在 此 前 ， 没 有 什么 语义 的 div 外 加 标识 性 的 类 
名 和 JIJD， 曾 经 顶替 过 这 些 新 元 素 的 角色 。 但 项 奉 实 非 长 久之 计 ， 它 们 会 限制 标记 本 
身 的 语义 和 可 移植 性 。 





























在 HTML 标准 从 HIML4 到 XHTML 再 向 HTMLS 过 渡 的 过 程 中 ,CSS3 则 取得 了 越 
来 越 多 浏览 器 的 支持 。 作 为 网 页 美容 工具 箱 ，CSS3 吸纳 了 大 量 的 建议 。 由 于 规模 实 





niil 
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在 太 大 ， 于 是 就 分 成 了 众多 模块 ， 分 别 由 不 同 的 团队 负责 每 个 模块 的 制定 工作 。 


经 过 了 长 久 的 等 待 , 我 们 终于 可 以 使 用 CSS3 的 新 功能 了 , 比如 说 渐变 、 过 渡 、 变 换 、 
阴影 、 圆 角 ， 等 等 。 不 过 ， 不 少 使 用 旧版 本 浏览 器 的 用 户 恐 人 还 是 无 法 体验 到 这 些 
新 “特效 "。 对 不 完全 支持 CSS3 的 浏览 器 ， 可 以 使 用 Modernizr 这 个 JavaScript 文件 
来 检测 出 它们 到 底 支 持 或 不 支持 哪 项 功能 。 对 于 不 支持 的 功能 ， 可 以 写 一 些 后 备 代 
码 (替代 代码 ) 或 者 使 用 腻子 脚本 (模拟 CSS3 功能 的 JavaScript 代码 )。 细 节 就 不 
在 这 儿 说 了 ， 看 本 书 附录 吧 。 


今天 的 互联 网 不 仅 变 得 更 加 “亲民 ”， 而 且 相 对 以 往 ， 开 发 人 员 的 生活 也 轻松 不 少 。 
就 拿 现 在 这 本 书 来 说 吧 ， 写 作 和 编码 花 了 我 几 百 个 小 时 的 时 间 ， 无 数 个 白天 和 黑夜 ， 
还 有 不 计 其 数 杯 咖啡 。 但 我 的 感觉 就 像 是 参加 一 个 庆祝 聚会 。 因 为 在 示例 和 代码 的 
背后 ， 本 书 实际 上 代表 了 当今 Web 设计 领域 最 前 沿 的 成 果 ， 而 这 些 成 果 曾 经 是 很 多 
人 考 首 企盼 的 美好 未 来 。 曾经 的 梦想 如 今 已 成 为 现实 。 因 此, 要 感谢 Jeffrey Zeldman、 
Ian Hicks, 还 有 很 多 我 说 不 上 名 字 来 的 人 。 正 是 他 们 的 努力 和 坚持 , 才 让 曾经 的 Web 
标准 化 之 梦 终于 成 真 。 这 种 感觉 ， 就 像 一 个 爬山 的 人 一 步 一 步 艰难 地 向 上 走 ， 而 突 
然 有 一 天 发 现 自己 已 经 息 到 了 山顶 一 样 。 想 想 看 ， 这 是 一 个 多 么 大 的 突破 呀 : 以 前 ， 
即使 要 写 一 个 最 简单 的 布局 都 必须 考虑 旧版 浏览 器 ， 为 此 我 得 花 数 页 篇 幅 向 读者 解 
FAE EAJ, 但 现在 我 既 可 以 省 下 我 的 笔墨 , 也 可 以 不 再 浪费 了 宝贵 的 纸张 了 ; 
以 前 ， 要 写 出 一 个 阴影 或 圆 角 效果 来 ， 我 得 机 关 算 尽 地 组 织 复杂 的 图 片 和 诅 套 的 
DIV， 但 现在 只 要 一 行 CSS 代码 就 可 以 搞定 了 ; 以 前 ， 注 注音 将 写 好 一 个 页 面 ， 在 
不 同 浏览 咒 里 看 起 来 往往 非常 不 一 样 ， 但 现在 所 有 新 版 本 浏览 需 都 能 完整 一 致 地 呈 
WET. 


所 以 ， 这 个 新 版 本 是 面向 未 来 的 。 我 没有 像 写 本 书 的 前 两 个 版 本 那样 ， 连 篇 累 肤 地 
跟 大 家 讲 怎么 解决 浏览 器 的 不 兼容 问题 ， 而 是 尽量 聚焦 于 HTML5、CSS3 以 及 现代 
浏览 器 所 能 实现 的 新 功能 。Internet Explorer 9, Firefox, Chrome, 、Safari， 还 有 Opera 
(对 了 ， 它 会 自动 更 新 )， 这 些 浏览 需 的 行为 能 够 保持 一 致 。 而 旧版 本 浏览 需 〈 尤 其 
是 IES 及 更 低 版 本 ) 的 用 户 与 日 俱 减 。 至 于 怎么 为 这 些 过 时 的 家 伙 提 供 服务 ， 大 家 
看 附录 。 本 书 的 主体 内 容 讲 的 只 是 今天 和 未 来 的 CSS。 
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只 需 了 解 最 基本 的 概念 


要 掌握 CSS， 不 需要 你 才华 横 溢 ， 也 不 需要 你 是 编程 高 手 。 如 果 你 很 有 才华 也 有 编 
程 经 验 ， 那 当然 更 好 。 本 书 只 要 求 你 对 HTML 和 CSS 有 基本 的 概念 ， 了 解 一 些 最 佳 
实践 。 然 后 ,你 可 以 通过 本 书 夯实 自己 的 基础 ， 加 深 自 己 对 CSS 的 理解 。CSS3 涉及 
的 功能 太 多 了 ， 有 一 些 本 书 连 提 都 没有 提 到 。 不 过 没关系 ， 相 信 你 只 要 把 本 书 读 懂 、 
吃透 ， 自 己 学 会 使 用 那些 新 玩 艺 儿 绝对 不 在 话 下 。 当 然 啦 ， 读 者 通过 自学 丰富 自己 
的 知识 和 技能 ， 也 是 本 书 作者 ( 也 包括 译 者 ) 由 衷 期 盼 的 。 

















下 载 代码 ， 别 自己 敲 


从 本 书 网 站 上 可 以 下 载 本 书 所 有 示例 的 代码 ， 网 址 为 : http://www.stylinwithess.com。 
我 建议 大 家 下 载 ， 不 光 是 因为 下 载 简单 省 事 儿 ， 还 因为 我 可 能 会 在 发 现 问 题 后 更 新 
这 些 代 码 。 男 外 ， 也 欢迎 大 家 到 我 的 网 站 上 提交 勘误 和 问题 。 这 个 网 站 有 我 的 博客 ， 
欢迎 光临 ， 也 许 你 能 从 中 得 到 有 用 的 信息 ， 或 者 受到 一 些 启发 。 当 然 ， 更 希望 大 家 
看 完 文章 后 给 我 留言 、 写 评论 。 














最 后 ， 感 谢 你 把 这 本 书 买 回来 。 希望 这 本 书 能 真正 帮 到 你 ， 特 别 是 能 够 帮 你 实现 自 
己 的 Web 之 梦 。 
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HTML 标记 与 文档 结 


这 是 一 本 讲 CSS 的 书 ， 所 以 ， 第 1 章 要 先 讲 讲 HTML (Hypertext Markup Language, 
超 文 本 标记 语言 )。 


之 所 以 从 HTML 讲 起 ， 是 因为 CSS 的 用 途 就 是 为 HTML 标记 添加 样式 。 所 以 ,你 首 
先 得 知道 怎么 编写 和 构造 HTML 标记 , 才能 让 CSS 更 方便 地 为 它 添加 样式 。 每 个 网 页 
在 啤 啤 险 地 时 都 只 包含 HTML 标记 ,因为 用 HTML 来 标记 内 容 是 做 任何 网 页 的 头 一 件 
事 。 所 谓 内 容 ， 就 是 你 想 要 传达 给 读者 的 那些 东西 ， 比 如 文字 、 图 片 、 音 频 和 视频 。 








用 HTML 标记 内 容 的 目的 是 为 了 赋予 网 页 语义 (semantic )。 换 句 话 说， 就 是 要 给 你 
的 网 页 内 容 赋予 某 些 用 户 代 理 ( user agent ) -能够 理解 的 含义 。 我 们 平常 用 的 浏览 器 、 
给 视 障 用 户 朗 读 网 页 的 屏幕 阅读 器 ， 以 及 搜索 引擎 放出 的 Web E RAEMP IREE, 
它们 需要 显示 、 朗 读 和 分 析 网 页 。HTML 规定 了 一 组 标签 ， 用 来 给 内 容 打 上 不 同 的 
标记 。 每 个 标签 都 是 对 它 所 包含 内 容 的 一 种 描述 。 最 常用 的 HTML 标签 描述 的 是 标 
题 、 段 落 、 链 接 和 图 片 。 目 前 ，HTML 一 共有 114 个 标签 ， 但 按照 80/20 原则 ， 使 
用 其 中 25 个 左右 的 标签 就 可 以 满足 80% 的 标记 需要 。 要 想 知 道 和 了 了 解 HTML 标签 ， 
可 以 看 看 本 书 网 站 : http:Wwww.stylinwithcss.com。 











在 给 内 容 都 打上 标记 之 后 ， 就 可 以 使 用 CSS 来 给 标签 添加 样式 了 。 添 加 样式 的 根据 
有 标签 名 、 标 签 属性 ( 如 id 和 class )， 以 及 标签 与 其 他 标签 在 标记 中 的 相对 位 置 关 
R, EE HTML 标签 也 会 构成 一 个 层次 化 的 文档 ， 从 而 可 以 通过 CSS 来 设置 网 页 
的 布局 ， 为 每 个 元 素 应 用 你 想 要 的 样式 。 

















1.1 


第 1 章 HTML 标记 与 文档 结构 


HTML 最 新 的 版 本 HTML5， 又 新 规定 了 一 批 结构 化 标签 ， 用 于 对 相关 内 容 的 标签 进 
行 分 组 ， 从 而 更 好 地 规范 网 页 的 整体 结构 。 这 些 新 标签 包括 <header> 、<nav> ( BI 
navigation， 导 航 )、<article>、<section>、<aside> 和 <footer>。 比 如 ， 对 于 一 组 可 以 
让 用 户 导 航 到 网 站 中 其 他 页 面 的 链接 ， 就 可 以 使 用 cnav> 标 签 把 它们 独立 地 标记 出 来 。 
而 在 <article> 里 , 则 可 以 组 织 起 来 一 篇 既 包 含 多 个 标题 , 又 包含 文本 段落 的 博客 文章 。 




















在 HTML5 标准 出 现 之 前 ,创建 页 面 的 结构 只 能 使 用 一 些 几 乎 没有 什么 语义 的 标签 ， 
比如 <div> 和 <span>。 而 现在 ， 我 们 有 了 一 套 专门 的 结构 化 标签 。 


为 了 进一步 说 明 上 述 思想 ， 接 下 来 我 们 就 看 一 看 到 底 怎 么 给 内 容 加 标记 ， 并 展示 怎 
么 用 HTML 创建 出 一 种 标签 层次 ， 以 便 应 用 CSS 和 JavaScript。 


HTML 标记 基础 


对 于 每 个 包含 内 容 的 元 素 〈 比如 标题 、 段 落 和 图 片 )， 根据 它 所 包含 的 内 容 是 不 是 文 
本 ， 有 两 种 不 同 的 方式 给 它们 加 标记 ， 一 种 是 使 用 闭合 标签 ， 另 一 种 是 使 用 自 闭合 
标签 。 


1.1.1 文本 用 闭合 标签 


闭合 标签 的 基本 格式 如 下 : 
“标签 名 > 文本 内 容 </ 标 签名 > 
可 以 给 这 个 标签 添加 一 些 属 性 ， 比 如 : 





《标签 名 属性 _1=" 属 性 值 ”属性 _2=" 属 性 值 "> 文本 内 容 </ 标 签名 > 

标题 、 段 落 等 文本 元 素 都 要 求 财 合 标签 ， 也 就 是 要 有 一 个 开标 签 和 一 个 财 标签 ， 
比如 : 

«hi»Words by Dogsworth</h1> 

«p»I wandered lonely as a dog.«/p» 

可 见 ， 每 个 标签 都 由 一 对 包含 标签 名 的 尖 括 号 组 成 。 标 签名 通常 是 一 个 ( 表示 内 容 
类 型 的 ) 英文 单词 的 简写 形式 或 者 其 中 的 一 个 字母 。 闭 标签 与 开标 签 的 不 同 之 处 是 
标签 名 前 面 多 一 个 斜 杠 。 


11 HTML 标记 基础 


位 于 开标 签 和 闭 标 签 之 间 的 , 就 是 将 来 会 显示 在 浏览 器 中 的 内 容 ; 标签 本 身 不 会 显示 。 


开标 签 和 闭 标 签 明 确 地 标识 出 了 标题 和 段落 的 起 始 位 置 。 注 意 ， 前 面 的 标题 标签 名 
中 有 一 个 数字 1， 那 是 因为 HTML 有 6 级 标题 ，<h1> 表 示 最 高 级 别 的 标题 。 


1.1.2 引用 内 容 用 自 闭合 标签 
< 标签 名 属性 1=" 属 性 值 ” 属性 _n=" 属 性 值 ”/》 


非 文 本 内 容 是 通过 自 闭合 标签 显示 的 。 闭 合 标 签 与 自 闭合 标签 的 区 别 在 于 ， 闭 合 标 
签 包 含 的 是 会 显示 的 实际 内 容 ， 而 自 闭合 标签 只 是 给 浏览 带 提 供 一 个 对 要 显示 内 容 
的 引用 。 浏 览 器 会 在 HTML 页 面 加 载 的 时 候 ， 额 外 向 服务 器 发 送 请 求 ， 以 取得 自 闭 
合 标签 引用 的 内 容 。 


下 面 就 是 使 用 自 闭合 标签 标记 的 一 张 图 片 。 





«img src-"images/cisco.jpg" alt="My dog Cisco"» 


关闭 标签 


XHTML 标准 严格 规定 所 有 标签 都 必须 关闭 , 但 HTML5 标准 在 这 方面 则 要 宽松 得 多 。 换 句 话说 ， 
在 HTML5 网 页 里 ， 某 些 闭 标签 是 可 以 省 略 不 写 的 。 要 了 解 HTML5 语法 ， 可 以 参考 这 个 链接 
htip://dev.w3.org/himl5/himl-author#syntactic-overview。 


即使 你 在 标记 段落 时 只 写 了 一 个 段落 的 开标 签 ， 没有 写 与 之 对 应 的 闭 标签 ,仍然 可 以 通过 
HTML5 标准 验证 。 不过, 我 个 人 习惯 于 关闭 所 有 标签 , 因为 这 样 可 以 更 清楚 地 知道 自己 标记 的 
结构 ， 同 时 也 能 保证 不 让 自己 忘 了 关闭 那些 应 该 关闭 的 标签 。 我 建议 读者 也 这 样 做 ， 本 书 中 的 
代码 示例 也 会 关闭 所 有 标签 。 

对 于 自 闭合 标签 ，XHTML 要 求 必须 这 样 写 : 

«img src-"images/cisco.;jpg" alt-"My dog Cisco" /> 

而 在 HTML5 中 ， 可 以 省 略 最 后 那个 表示 关闭 的 斜 枉 ， 写 成 : 

«img src="images/cisco.jpg" alt-"My dog Cisco" > 


不 过 ,我 还 是 习惯 于 给 自 闭合 标签 的 未 尾 也 加 上 一 个 空格 和 和 斜 枉 。HTNL5 会 忽略 这 个 斜 杠 , 而 
我 在 检查 代码 结构 时 ， 通 过 它 一 眼 就 能 知道 这 个 标签 已 经 关闭 了 ， 所 以 它 不 包含 后 面 的 标签 。 
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1.1.3 属性 





属性 负责 为 浏览 器 提供 有 关 标 签 的 额外 信息 。 比 如 说 ， 前 面 例子 中 的 <img> 标 签 有 两 
个 属性 。 一 个 属性 是 src (source， 来 源 )， 属 性 值 为 cisco.jpg。 这 个 属性 定义 了 图 
片 的 来 源 是 一 个 名 为 ciscojpg 的 文件 。 另 一 个 属性 是 alt (alternative, BARAR ), 
定义 的 是 在 图 片 因 故 未 能 加 载 成 功 时 在 屏幕 上 显示 的 文本 。 


视 障 用 户 使 用 的 屏幕 阅读 器 会 大 声 读 出 alt 属性 的 内 容 ， 因 此 一 定 要 给 <img> 标 签 的 
这 个 alt 属性 添加 让 人 一 听 (或 一 看 ) 就 能 明白 的 内 容 。 


每 个 HTML 标签 都 可 以 添加 属性 。 在 稍 后 的 例子 中 我 们 会 看 到 , class 和 id 等 属性 ， 
几乎 可 以 适用 于 任何 标签 。 而 另 一 些 属 性 ， 比 如 src， 则 只 适用 于 类 似 <img> 这 样 的 
引用 源 文件 的 标签 。 





» 要 想 了 解 所 有 HTML 标签 和 属性 ， 可 以 参考 HTML Dog Mk: http://htmldog.com/ 


reference/htmltags。 


本 章 使 用 了 哪些 HTML 标签 


以 下 是 本 章 使 用 的 块 级 (block) 和 行内 (inline ) 标签 。 至 于 什么 是 块 级 标签 ， 什 么 是 行内 标 
签 ， 本 章 稍 后 再 作 介绍 。 


块 级 标签 

<h1>-<h6> : 6 级 标签 ，<h1> 表 示 最 重要 
«p: 段落 

«ol»: 有 序列 表 

<li>: 列表 项 

<blockquote>: 独立 引用 


(tj [B] (B) [E] (Ei 


A 
3t 
R 


<a>: 链接 (anchor, £8) 
<img: 图 片 

«em»: RHA 

<strong>: 重要 
«abbr»: 简写 
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口 «cite»: 引证 
口 <q>: 文本 内 引用 





1.1.4 ”标题 与 段落 


到 现在 为 止 , 我 们 用 得 最 多 的 还 是 标题 和 上 段落 标签 。 一般 来 说 , 网 页 都 会 以 一 个 <h1> 
标签 开头 ， 其 中 的 文本 用 于 告诉 读者 这 个 网 页 是 干什么 的 。 然 后 用 <h2> 标 记 下 一 级 
内 容 ， 或 许 是 一 个 副标题 ， 然 后 才 是 <h3>， 依 此 类 推 。 

<h1> 不 仅 是 最 大 最 突出 的 标题 ( 除非 你 用 CSS 缩小 它 的 字号 ), 搜索 引擎 也 会 将 其 视 
为 仅 次 于 <title> 标 签 的 男 一 个 搜索 关键 词 的 来 源 。 

段落 用 于 标记 主要 的 文本 内 容 ， 是 所 有 文本 元 素 中 出 场 率 最 高 的 一 个 。 简 言 之 ， 只 
要 有 不 适合 放 在 其 他 文本 标签 中 的 文本 ， 都 可 以 把 它 放 一 个 段落 里 面 。 

接 下 来 ， 我 们 会 谈 一 谈 文 档 流 ( document flow )、 行 内 元 素 和 块 级 元 素 的 概念 ， 介 绍 
一 下 每 个 元 素 在 页 面 中 怎么 形成 一 个 方 盒子 (box )。HTML 中 的 这 些 基本 概念 ， 对 于 
使 用 CSS 快速 有 效 地 为 文档 添加 样式 ， 使 其 变 成 你 期 望 的 布局 和 外 观 具 有 重大 意义 。 





11.5 ”复合 元 素 


HTML 不 仅 规定 了 标题 、 图 片 和 段落 等 基本 的 内 容 标记 ， 还 规定 了 用 于 创建 列表 、 
表格 和 表单 等 复杂 用 户 界 面 组 件 的 标记 ， 这 些 就 是 所 谓 的 复合 元 素 ， 即 它们 是 由 多 
个 标签 共同 构成 的 。 





比如 , <1i> 是 一 个 列表 项 , 它 只 在 <ol>(ordered list, 有 序列 表 ) 和 <ul>( unordered list, 
无 序列 表 ) 这 两 种 列表 标签 中 才 有 效 , 在 <dl> (definition list， 定 义 列表 ) 中 则 无 效 。 
下 面 是 一 个 包含 三 个 列表 项 <1i> 的 有 序列 表 <ol> 的 例子 : 


«ol» 
«li»Save HTML file«/li» 
«li»Move file to Web server via FTP«/li» 
«li»Preview in browser«/li» 

</ol> 
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图 1-1 展示 了 这 个 列表 在 浏览 器 中 呈现 的 效果 。 


eoo Compound Elements 


kalet e fa ) 








. Save HTML file 


1 
2. Move file to Web server via FTP 
3 


. Preview in browser 





& 1-1 有 序列 表示 例 。 浏 览 器 会 自动 给 每 个 列表 项 编号 

这 个 例子 告诉 了 我 们 两 个 基本 知识 点 。 首 先 ， 某 些 标签 ( 如 这 里 的 <ol> ) 要 求 其 他 
标签 ( 即 这 里 的 <li> ) 与 之 共同 出 现 。 其 次 ,我 们 说 这 里 的 列表 项 <1i>“ 被 衣 套 ”在 
有 序列 表 <ol> 中 ， 因 为 有 序列 表 的 开标 签 位 于 所 有 列表 项 之 前 ， 闭 标签 位 于 所 有 列 
表 项 之 后 。 标 签 敬 套 是 我 们 必须 要 理解 的 一 个 至 关 重 要 的 概念 。 


1.1.6 REMA 


在 上 面 的 例子 中 ， 基 于 <1i> 标 签 与 <o01> 标 签 的 散 套 关系 ,我们 还 可 以 说 <1i> 标 签 是 
<ol> 标 签 的 子 标签 ( 或 子 元 素 )， 或 者 说 <ol> 标 签 是 <1i> 标 签 的 父 标 签 〈 父 
元 素 )。 

下 面 是 使 用 cem> (emphasis, 9838 ) 标签 来 强调 段落 中 一 个 单词 的 例子 。 遗 憾 的 是 ， 
其 中 的 <em> 子 标签 内 套 在 <p> 标 签 里 的 方式 是 错误 的 。 


<p>That car is «em»fast«/p».«/em» 
正确 的 写法 应 该 是 下 面 这 样 的 。 
<p>That car is «em»fast«/em».«/p» 


WWE, EUE— T ERAS UCET — E ( 也 就 是 前 者 的 开标 签 写 在 后 者 的 开标 签 
之 前 )， 必 须要 先 关 闭 后 一 个 标签 再 关闭 前 面 那个 标签 。 上 面 第 一 个 例子 搞 错 了 ， 第 
二 个 例子 没有 问题 。 





HTML 文档 的 结构 正 是 通过 类 似 这 样 的 标签 肉 套 ,以 及 就 此 建立 起 来 标签 间 的 “ 父 - 
子 ” 关 系 形成 的 。 下 面 ， 我 们 就 通过 分 析 一 个 HTML 文档 的 结构 ， 来 实际 地 演练 
一 番 。 


1.2 
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HTML 文档 剖析 


AJLA HTML 元 素 是 所 有 HTML 文档 ( 也 就 是 网 页 ) 中 都 必须 包含 的 。 这 些 元 素 
为 内 容 提供 了 框架 ， 有 了 这 个 框架 才能 正确 显示 内 容 。 可 以 把 这 些 必要 的 元 素 想 
象 成 一 个 模板 页 面 里 必须 得 有 的 元 素 。 很 多 网 页 编写 工具 ， 比 如 Adobe 
Dreamweaver， 会 在 每 次 创建 新 HTML 页面 时 自动 给 你 生成 一 个 包含 这 些 元 素 的 
模板 页 面 。 








HTMLS 标准 推出 之 后 ，HTML 文档 的 结构 一 下 子 得 到 了 极 大 简化 。 就 算 你 的 Web 
开发 经 验 不 多 , 估计 都 会 对 之 前 HIML fe XHTML 复杂 的 文档 类 型 (doctype ), 包 
括 过 渡 型 和 严格 型 ,以 及 那些 元 数据 标签 ( <meta> ) 记 忆 狂 新。 所 有 这 些 , 在 HTMLS 
中 都 已 经 被 更 简单 的 语法 取代 ， 而且 虽 然 语 法 简单 但 却 能 够 与 之 前 的 HTML 版 本 
兼容 。 


1.2.1 HTML 模板 


AR, 按照 HTML5 语法 编写 的 最 简单 的 HTML 页 面 的 模板 可 以 写成 这 样 : 


«IDOCTYPE html» 

«html» 
«head» 
«meta charset-"utf-8" /> 
«title»An HTML Template«/title» 
«/head» 
«body» 

《1-- 这 里 是 网 页 内 容 --> 

«/body» 

«/html» 


模板 的 第 一 行 代 码 是 一 种 新 语法 , 或 者 说 是 一 种 简化 的 DOCTYPE, 这 一 行 就 是 为 了 声 
明 :“ 以 下 是 一 个 HTML 文档。” 注 意 ， 这 个 标签 不 用 关闭 。 





然后 是 <htm1> 标 签 ， 也 就 是 所 谓 的 根 级 标签 ， 因 为 页 面 中 所 有 的 其 他 标签 都 能 套 在 
这 个 标签 内 部 ， 而 且 它 的 闭 标 签 也 是 整个 页 面 中 的 最 后 一 个 财 标签 。<htm1> 标 签 只 
有 了 两 个 直接 的 子 标 签 : <head> 和 <body>。 
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使 用 HTML 注释 标签 ， 可 以 为 你 自己 或 者 其 他 将 来 可 能 会 修改 这 个 页 面 的 人 写 一 些 
备注 。HTML 注释 以 <1-- 开 头 ， 以 --> 结 尾 ， 注 释 内 容 就 写 在 它们 中 间 。 浏 览 器 在 加 
载 页 面 时 ,会 忽略 注释 ， 不 会 显示 其 中 的 内 容 。 





帮助 浏览 器 理解 页 面 的 信息 都 包含 在 <chead> 标 签 中 。 在 这 个 最 简单 的 例子 里 ，<head> 
标签 里 只 包含 cmeta> 和 <title> 两 个 标签 。 其 中 ，<meta> 标 签 有 一 个 charset 属性 ， 
它 是 在 告诉 浏览 器 这 个 页 面 使 用 的 是 UTF-8 编码 ,而 <title> 标签 中 的 文本 会 在 页 面 
显示 时 ， 作 为 整个 页 面 的 标题 出 现在 浏览 器 窗口 顶部 的 标题 栏 中 。 上 面 模板 中 页 面 
的 标题 是 “An HTML Template" ; 


关于 <title> 标 签 


搜索 引 警 会 给 <title> 标 签 中 的 文字 内 容 赋予 很 高 的 权重 ， 而 且 这 些 文字 也 会 作为 网 页 标题 出 
现在 搜索 结果 列表 中 。 为 此 ， 干 万 不 要 让 那些 “欢迎 光临 我 的 网 页 ! ”之 类 的 废话 占据 你 的 
<title> 标 签 。 一 定 要 让 这 些 文字 简洁 明确 ， 而 且 包 含 目 标 读者 在 搜索 你 的 网 页 内 容 时 会 使 用 
的 关键 词 。 


而 <body> 标 签 则 包含 着 标记 所 有 内 容 的 HTML 元 素 。 接 下 来 ， 我 们 先 把 原来 的 注释 
替换 成 号 外 两 个 标签 ， 然 后 再 看 看 页 面 在 浏览 器 中 显示 的 效果 。 


在 上 面 模板 的 <body> 标 签 中 ， 我 们 再 添加 两 个 标签 : 


«body» 

«hi»Stylin' with CSS«/h1» 

«p»Great Web pages start with great HTML markup!«/p» 
«/body» 


图 1-2 展示 了 当前 页 面 在 浏览 器 中 显示 的 效果 。 


eoo An HTML Template 


hale) ET e fa j 
Stylin’ with CSS 


Great Web pages start with great HTML markup! 








图 1-2” 带 有 一 个 标题 和 一 个 段落 的 示例 模板 页 面 
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浏览 器 把 包含 内 容 的 元 素 在 页 面 中 和 目 上 而 下 地 一 一 排列 ， 起 点 是 页 面 的 左上 角 。 仔 
细 看 一 看 ， 会 发 现 页 面 中 标题 和 段落 文本 的 字号 不 一 样 ， 但 字体 都 是 Times Roman, 
而 且 标 题 与 段落 之 间 还 有 一 定 的 间距 。 很 显然 ， 浏 览 器 已 经 为 页 面 应 用 了 一 些 基本 
的 样式 。 这 些 初始 ( 默认 ) 的 样式 ,来 自 浏 览 器 内 置 的 一 个 CSS 样式 表 ， 它 只 会 ; 
每 个 HTML 元 素 添加 一 些 最 基本 ， 当 然 也 谈 不 上 美观 的 样式 。 











接 下 来 再 给 模板 添加 两 个 比较 常用 的 HTML 元 素 ， 一 个 链接 ， 一 个 图 片 。 


«body» 
«hi»Stylin' with CSS«/h1» 
«p»Great Web pages start with great HTML markup!«/p» 
«a href-"http://www.stylinwithcss.com"»My Books«/a» 
«img src-"images/cisco.jpg" alt-"My dog Cisco" /» 
«/body» 


图 1-3 展示 了 页 面 现 在 的 效果 。 





eoo An HTML Template 


EI 了 | e fa j 
Stylin’ with CSS 


Great Web pages start with great HTML markup! 








My Books 
| 








图 1-3 页面 中 目前 包含 着 标题 、 段 落 、 链 接 和 图 片 


链接 是 使 用 ca> 标 签 创建 的 ， 该 标签 有 一 个 必需 的 属性 href (hyperlink reference， 超 
链接 引用 )， 其 中 包含 着 链接 指向 的 页 面 的 URL。 


前 面 我 们 也 提 到 过 <img> 标 签 ， 而 现在 你 终于 看 到 它 的 效果 了 。 在 这 个 标签 里 ， 同 样 
是 给 出 图 片 所 在 位 置 的 URL， 要 使 用 src (source, 来 源 ) 而 不 是 href 属性 。 


有 一 点 你 可 能 注意 到 了 : 虽然 标题 和 段落 是 上 下 堆 县 在 一 起 的 ， 但 链接 和 图 片 却 是 并 
排 显示 的 。 为 什么 会 这 样 呢 ? 因为 标题 和 段落 是 块 级 元 素 , 而 链接 和 图 片 是 行内 元 素 。 
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1.2.2 ” 块 级 元 素 和 行内 元 素 
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图 1-3 展示 了 所 谓 “ 文 档 流 ” 的 效果 ， 也 就 是 HTML 元 素 会 按照 它们 各 自在 标记 中 
出 现 的 先后 顺序 ， 依 次 从 页 面 上 方 “流向 ”下 方 。 浏 览 融 的 样式 表 之 所 以 提供 这 种 
流动 式 效 果 ， 就 是 为 了 让 那些 简单 但 却 正确 标记 了 HTML 的 内 容 ， 能 够 以 朴素 但 却 
可 用 的 方式 显示 出 来 。CSS 的 妙 处 就 在 于 把 这 种 实用 主义 的 默认 显示 效果 ， 转 换 成 
有 既 有 吸引 力 又 直观 的 页 面 设计 。 





几乎 所 有 HTML 元 素 的 display 属性 值 要 么 为 block， 要 么 为 inline。 最 明显 的 一 
个 例外 是 table 元 素 ， 它 有 自己 特殊 的 display 属性 值 。 





块 级 元 素 〈 比如 标题 和 段落 ) 会 相互 堆 县 在 一 起 沿 页 面向 下 排列 ， 每 个 元 素 分 别 占 
一 行 。 而 行内 元 素 〈 比如 链接 和 图 片 ) 则 会 相互 并 列 ， 只 有 在 空间 不 足以 并 列 的 情 
况 下 才 会 折 到 下 一 行 显示 。 

无 论 你 想 了 解 哪个 HTML 元 素 ， 第 一 个 要 问 的 问题 都 应 该 是 : 它 是 块 级 元 素 ， 还 是 


行内 元 素 ? 知道 了 这 一 点 之 后 ， 就 可 以 在 编写 标记 的 时 候 ， 预 想到 某 个 元 素 在 初始 
状态 下 是 如 何 定位 的 ， 这 样 才能 进一步 想 好 将 来 怎么 用 CSS 重新 定位 它 。 





使 用 块 级 元 素 和 行内 元 素 构建 页 面 


这 里 是 一 个 完全 由 标题 和 段落 组 成 的 页 面 。 为 了 保证 屏幕 截图 和 代码 清晰 ， 我 故意 
把 段落 都 弄 得 非常 得。 页 面 的 标记 如 下 。 











«IDOCTYPE html» 
«html» 


«head» 

«meta charset-"utf-8" /» 

«title»Block and Inline Elements«/title» 
«/head» 


«body» 
«hi»Types of Guitars«/h1» 
«p»Guitars come in two main types: electric and acoustic.«/p» 
«h2»Acoustic Guitars«/h2» 
«p»Acoustic guitars have a large hollow body that projects the sound of the 
strings.«/p» 
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«h3»Nylon String Acoustic Guitars«/h3» 

«p»Descendants of the gut-strung instruments of yore, nylon string guitars 
have a mellow tone.«/p» 

«h3»Steel String Acoustic Guitars«/h3» 

«p»Steel string guitars first appeared in country music and today most acoustic 
guitars have steel strings.«/p» 

«h2»Electric Guitars«/h2» 

«p»Electric guitars have a solid or hollow body with pickups that capture 
the string vibration so it can be amplified.«/p» 

«h3»Solid Body Electric Guitars«/h3» 

«p»Solid body electric guitars are commonly used in rock and country music.«/p» 

«h3»Hollow Body Electric Guitars«/h3» 

«p»Hollow body acoustic guitars are commonly used in blues and jazz.«/p» 
«/body» 


«/html» 
整个 页 面 的 内 容 只 有 标题 和 段落 。 为 清晰 起 见 , 这 里 省 略 了 本 该 有 的 <article> 等 标签 。 
图 1-4 展示 了 以 上 代码 在 浏览 絮 中 显示 的 效果 。 


eoo Block and Inline Elements 
EDA co J 














Types of Guitars 

Guitars come in two main types: electric and acoustic. 

Acoustic Guitars 

Acoustic guitars have a large hollow body that projects the sound of the strings. 

Nylon String Acoustic Guitars 

Descendants of the gut-strung instruments of yore, nylon string guitars have a mellow tone. 

Steel String Acoustic Guitars 

Steel string guitars first appeared in country music and today most acoustic guitars have steel strings. 
Electric Guitars 

Electric guitars have a solid or hollow body with pickups that capture the string vibration so it can be amplified. 
Solid Body Electric Guitars 

Solid body electric guitars are commonly used in rock and country music. 


Hollow Body Electric Guitars 


Hollow body acoustic guitars are commonly used in blues and jazz. 





1-4 ”由 标题 和 上 段落 构成 的 页 面 
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在 以 上 代码 和 屏幕 截图 中 ， 可 以 看 到 三 种 级 别 的 标题 。 浏 览 器 为 每 一 级 标题 分 别 应 
用 了 不 同 的 字号 ， 从 而 让 页 面 内 容 的 层次 显得 非常 分 明 。 由 于 标题 和 段落 都 是 块 级 
元 素 ， 所 以 每 个 元 素 各 占 一 行 。 

还 有 ， 页 面 四 周 都 添加 了 一 定 的 边 距 ， 所 以 文本 才 不 会 磁 到 浏览 需 窗 口 。 而 且 ， 段 
落 中 的 行 与 行 之 间 也 有 距离 。 好 了 ， 边 距 的 话题 回头 我 们 再 仔细 聊 ， 还 是 先 给 页 面 
添 几 张 图 片 吧 。 如 图 1-5 所 示 ， 当 然 你 已 经 知道 了 ， 图 片 是 行内 元 素 。 





eoo Block and Inline Elements 
Kc eK a) (ajm («T 


| QQ Disable - $ Cookies - ] CSS - = Forms ~ [È] Images ~ @ Information ~ į} M 











Types of Guitars 


Guitars come in two main types: electric and acoustic. 


Acoustic Guitars 





Acoustic guitars have a large hollow body that projects the sound of the strings. 





图 1-5 为 页 面 添加 两 个 行内 元 素 〈 吉他 图 片 ) 


标记 中 的 两 个 cimgy 标 签 虽然 分 别 位 于 两 行 ， 但 这 并 不 影响 图 片 在 浏览 器 中 显示 时 的 
效果 。 图 片 是 行内 元 素 ， 所 以 它们 显示 的 时 候 就 会 并 列 出 现在 一 行 上 ; 而且， 标签 
之 间 的 空白 (包括 制 表 、 回 车 和 空格 ) 都 会 被 浏览 器 忽略 "。 因 此 ， 为 了 让 代码 的 版 
式 布局 一 目 了 然 ， 你 可 以 随意 在 标签 之 间 添 加 换行 和 空格 。 一 般 推 荐 的 做 法 都 是 子 
标签 相对 于 父 标 签 要 有 一 个 缩 进 。 





根据 CSS 标准， 默认 情况 下 ， 多 个 空白 会 被 浏览 器 和 加 为 一 个 。 一 一 译 者 注 


212- 
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以 下 是 图 1-5 中 展示 的 那 部 分 页 面 对 应 的 代码 ,其 中 包含 两 张 图 片 , 图 片 是 行内 元 素 ， 
所 以 两 把 吉它 会 并 排 显示 。 





«body» 
«hi»Types of Guitars«/h1» 
«p»Guitars come in two main types: electric and acoustic«/p» 
«h2»Acoustic Guitars«/h2» 
«img src-"images/acoustic nylon.jpg" alt-"nylon string acoustic guitar" /» 
«img src-"images/acoustic steel.jpg" alt-"steel string acoustic guitar" /» 
«p»Acoustic guitars have a large hollow body that projects the sound of the 

strings.«/p» 
«/body» 


现在 ， 为 了 进一步 加 深 对 块 级 元 素 和 行内 元 素 的 理解 ， 我 们 在 这 个 页 面 上 搞 一 次 小 
试验 。 这 次 试验 要 用 到 我 最 喜欢 的 一 个 开发 工具 , 那 就 是 Web Developer 扩展。 它 是 
Firefox 的 一 个 扩展 ， 安 装 之 后 它 会 生成 一 个 荣 单 ， 里 面包 括 很 多 查看 HTML. CSS 
和 JavaScript 的 工具 。 





d» 要 安装 Web Developer, Æ Firefox 工具 栏 中 选择 “附加 组 件 ”， 然 后 在 “附加 组 件 营 
zo 


理 器 ”中 搜索 “Web Developer”。 找 到 之 后 ， 点 击 安装 。 


eoo Block and Inline Elements 

















OE ck 2) [e] (n-] «T 
@ Disable + $ Cookies + ,^ CSS + = Forms ~ Cj Images * Qj Information * jj Miscellaneous * 4" Outline * (i| Resize * M^ Tools * View Sou 
Outline Frames 
: Outline Headings 
Types of Guitars Outline Links > 
Outline Tables » 
Guitars come in two main types: electric and acoustic. Outline Block Level Elements 
P : Outline Deprecated Elements 
Acoustic Guitars Outline Positioned Elements » 


Outline Current Element 
Outline Custom Elements... 


Show Element Names When Outlining 





Acoustic guitars have a large hollow body that projects the sound of the strings. 





1-6 ”我 在 Web Developer 工具 条 中 选择 了 Outline 菜单 


在 图 1-6 中 ， 可 以 看 到 浏览 器 窗口 顶部 偏 下 的 Web Developer 工具 条 。 这 个 工具 条 有 
很 多 功能 ， 其 中 一 个 就 是 能 让 你 更 清晰 地 确定 每 个 元 素 的 位 置 ， 以 及 元 素 之 间 的 骸 


-13- 


-14- 


第 1 章 HTML 标记 与 文档 结构 


套 关系 。 如 图 所 示 ， 我 选择 了 Outline ( 轮廓 ) 菜单 中 的 Outline Block Level Elements 





(显示 块 级 元 素 的 轮廓 ) 命令 ， 这 个 命令 可 以 显示 页 面 中 块 级 元 素 方 盒子 的 轮廓 。 


eoo Block and Inline Elements 







html > body > img 


Types of Guitars 


(Guitars come in two main types: electric and acoustic. 


Acoustic Guitars 


T 


Acoustic guitars have a large hollow body that projects the sound of the strings. 



























1-7 选择 Outline Block Level Elements 命令 后 ， 会 显示 块 级 元 素 盒子 的 实际 大 小 以 及 
相互 之 间 的 间距 。 没 有 显示 行内 元 素 的 轮廓 

显示 块 级 元 素 的 轮廓 之 后 ， 通 过 图 1-7 就 可 以 发 现 元 素 盒子 比 它们 包含 的 文本 要 

大 一 些 。 每 个 盒子 的 高 度 比 内 容 稍微 高 一 点 ， 而 宽度 跟 浏览 吉 窗 口 一 样 宽 ! 


块 级 元 素 盒子 会 扩展 到 与 父 元 素 同 宽 


在 我 们 这 个 页 面 中 ， 所 有 块 级 元 素 的 父 元 素 都 是 body， 而 它 的 宽度 默认 与 浏览 器 窗 
口 一 样 宽 〈 当然 有 少量 边 距 )。 因 此 ， 所 有 块 级 元 素 就 与 浏览 带 和 窗口 一 样 宽 了 。 说 到 
这 ， 相 信 你 就 能 理解 为 什么 块 级 元 素 始终 会 占 一 行 了 。 对 了 ， 就 是 因为 它们 始终 会 
保持 与 浏览 器 窗口 同 宽 。 这 样 一 来 ， 一 个 块 级 元 素 旁 边 也 就 没有 空间 容纳 另 一 个 块 
级 元 素 了 。 


12 HTML 文档 剖析 





通过 Web Developer 工具 条 不 能 像 显示 块 级 元 素 轮 廓 那样 , 同时 显示 所 有 行内 元 素 的 
轮廓 。 不 过 ， 通 过 Outline 菜单 中 的 Outline Custom Elements ( 显示 自 定 义 元 素 的 轮 
JE) 命令 可 以 显示 这 些 元 素 的 轮廓 。 行 内 元 素 盒 子 的 行为 与 块 级 元 素 盒子 的 行为 正 
好 相反 。 





行内 元 素 盒子 会 “收缩 包 右 ”其 内 容 ， 并 且 会 尽 可 能 包 紧 


说 到 这 ， 你 就 可 以 理解 为 什么 几 个 行内 元 素 会 并 排 显示 在 一 行 ， 而 每 个 块 级 元 素 都 
会 男 起 一 行 了 。 


1.2.3 BERTA 


ME, BA- PRE HTML 元 素 到 了 屏幕 上 是 什么 效果 啦 。 前 面 例子 中 
的 所 有 元 素 都 有 一 个 共同 的 父 元 素 body。 因 此 ，Web Developer 通常 不 显示 它 。 
但 通过 在 Outline 菜单 中 选择 Outline Custom Elements 命令 ， 可 以 自 定义 显示 body, 
如 图 1-8 所 示 。 





Outline Frames 


s k Enter the elements (eg. div) to outline and the colors to use 
Outline Headings 





























Outline Links P Element 1 
Outline Tables b Ed [gd 
Outline Block Level Elements 
Outline Deprecated Elements Element 2 
Outline Positioned Elements b img E 
Outline Current Element E : 
Outline Custom Elements... emen: 
Show Element Names When Outlining m 
Element 4 
Element 5 





1-8 选择 Outline Custom Elements 命令 后 ， 在 弹出 的 窗口 中 可 以 指定 显示 哪个 元 素 以 及 
用 什么 颜色 显示 


NT 
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如 图 1-9 所 示 ， 父 元 素 body 的 盒子 ( 最 外 面 的 轮廓 ) BRE mEnE ) 着 所 
有 子 元 素 盒子 〈 内 部 的 轮廓 ) 其 中 ， 块 级 子 元 素 扩展 到 与 body WREE, JAAA 
认 与 浏览 融 窗 口 同 宽 (但 有 一 点 外 边 距 )。 


在 标记 中 其 套 的 是 HTML 标签 ， 而 在 屏幕 上 财 套 的 则 是 一 个 个 的 盒子 


eno Block and Inline Elements. 
«0 e o(*)(m-)(«]- 














html > body > img 





Types of Guitars 








[Guitars come in two main types: electric and acoustic. 








Acoustic Guitars 














Acoustic guitars have a large hollow body that projects the sound of the strings. 








[Acoustic guitars have a large hollow body that projects the sound of the strings. 








Nylon String Acoustic Guitars 








[Descendants of the gut-strung instruments of yore, nylon string guitars have a mellow tone. 








Steel String Acoustic Guitars 








Steel string guitars first appeared in country music and today most acoustic guitars have steel strings. 








Electric Guitars 


LÁ 














[Acoustic guitars have a large hollow body that projects the sound of the strings. 








[Electric guitars have a solid or hollow body with pickups that capture the string vibration so it can be amplified. 








Solid Body Electric Guitars 








Solid body electric guitars are commonly used in rock and country music. 








Hollow Body Electric Guitars 











[Hollow body acoustic guitars are commonly used in blues and jazz. 


























1-9 SER body 包围 着 它 的 子 元 素 
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在 一 个 包含 很 多 元 素 的 页 面 中 ,盒子 套 盒子 会 越 套 越 深 ， 此 时 合理 的 HTML 布局 有 
助 于 通过 标记 看 清 页 面 结构 ， 从 而 保证 标签 间 正 确 的 藤 套 关系 。 我 们 推荐 HTML 标 
签 每 个 层次 相对 于 上 一 层次 都 缩 进 4 个 空格 ， 如 下 面 代码 中 的 点 所 示 。 





. Æ Dreamweaver 等 HTML 编辑 器 中 ， 每 次 按 Tab 键 时 就 会 缩 进 4 个 空格 ， 从 而 保证 
«nav id-"toc"» 

2. «0l» 

TEE <li><a href-"f"»Introduction«/a»«/li» 

TTE <li><a href="#">Chapter 1«/a»«/li» 


A <li><a href="#">Chapter 2«/a»«/li» 
EP <li><a href="#">Chapter 3«/a»«/li» 


«/nav» <!-- end table of contents --» 

Fi zEbsiO n BREBUDIT 

di EAE — HUE TA, XX BW JH blockquote 元 素 。 顾 名 思 义 ，blockqoute 
元 素 包 含 引 用 内 容 ， 而 且 在 页 面 上 看 起 来 是 独立 的 元 素 。 请 注意 代码 中 使 用 的 表示 
弯 引 号 的 HTML 实例 。 





«blockquote»&ldquo;Sometimes you want to give up the guitar, you'll hate the 
guitar. But if you stick with it, you're gonna be rewarded.&rdquo; 
«cite»Jimi Hendrix«/cite» // 使 用 cite 元 素 包 含 作 者 姓名 

«/blockquote» 


图 1-10 展示 了 这 段 代 码 在 页 面 中 显示 的 效果 ， 为 两 个 元 素 都 加 了 轮廓 。 
eoo Two Examples of Nesting in Markup 


Om eK OCHAN 


(Q) Disable ~ $ Cookies + CSS ~ = Forms - 回 Images 7 T" Informa: 











the guitar. But if you stick with it, you're gonna be 
rewarded." Jimi Hendrix 





peer you want to give up the guitar, you'll hate 








1-10 blockquote 元 素 默 认 会 缩 进 
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HTML 实体 


HTML 实体 常用 于 生成 那些 键盘 上 没有 的 印刷 字符 ， 比 如 to O, E. HIM 实体 以 一 个 
和 号 (&) 开头 ， 一 个 分 号 6) 结尾 ， 二 者 之 间 是 表示 实体 的 字符 串 。 在 前 面 的 例子 中 ， 两 个 
实体 的 名 字 分 别 是 “lefi-double-quote”【〔 左 双 引号 ) 和 “right-double-quote” ( 右 双 引号 ) 
的 简写 。 


Peachpit 另 一 位 作者 Elizabeth Castro( 她 的 书 非常 赞 ， 在 此 强烈 向 大 家 推荐 ) 在 自己 的 一 个 网 
页 中 列 出 了 常用 的 HTML 实体 : http://www.elizabethcastro.com/ html/extras/entities.html. 


要 注意 的 是 , 由 于 和 号 表示 实体 开头 , 所 以 在 要 显示 和 号 的 时 候 不 能 直接 写 和 号 , 而 要 在 HTML 
标签 包含 的 文本 中 使 用 gamp; 实体 , 这 样 才能 显示 出 & 来 。 比 如 , 写成 Johnson &amp; Johnson, 
才 会 显示 成 : Johnson & Johnson。 


THA, <blockquote> 标签 也 是 一 个 块 级 元 素 〈 它 名 字 里 就 有 block )。 因 为 它 的 目的 
就 是 在 页 面 中 独立 显示 一 块 内 容 ， 所 以 作为 块 级 元 素 非 常 合适 。 


EF blockquote 元 素 中 位 于 引用 文本 之 后 的 是 cite 元 素 , 它 是 一 个 行内 元 素 。 
为 文本 结束 后 还 有 空间 ， 所 以 它 就 显示 在 了 段落 最 后 一 行 上 。 从 图 1-10 中 也 可 以 看 
到 ，<cite> 标 签 的 内 容 默 认 是 斜体 。 





同样 是 在 这 个 例子 中 ， 还 可 以 看 到 两 个 HTML 实体 ，&1dquo; 和 8&rdquo; ， 分 别 用 于 
生成 能 够 正确 打印 出 来 的 左 、 右 双 引 号 。 使 用 这 两 个 引号 的 实体 ， 而 不 是 按键 盘 上 
的 Shift ( Shift- 引 号 键 )， 能 让 页 面 显示 更 加 专业 。 


A 


第 二 个 藤 套 的 例子 如 下 ， 是 一 个 块 级 元 素 包 含 三 个 行内 元 素 。 








«p»It is <strong>absolutely critical«/strong» that «em»everyone«/em» does this 
«abbr title-"as soon as possible"»ASAP«/abbr»!«/p» 


图 1-11 展示 了 Firefox 浏览 器 中 显示 的 效果 。 


€ O Two Examples of Nesting in Markup 


OE ek aJ [a] (Ez e 


@ Disable - $ Cookies - f CSS - z Forms * 回 Images ~ 














图 1-11 一 个 段落 中 谋 套 着 三 个 分 别 表示 重 要 性 、 强 调和 简写 的 标签 


1.3 


1.3 ”文档 对 象 模型 





图 1-12 与 图 1-11 一 样 ， 只 不 过 显示 了 元 素 盒子 的 轮廓 。 


AMA TwoExamples of Nesting in Markup 


ON ek aJ (e) 


@ Disable ~ $ Cookies - J^ CSS - z Forms - [7j Images - 
































absolutely critical/that everyone|does this ASAP! 








图 1-12 三 个 行内 元 素 谋 套 在 一 个 块 级 元 素 中 

这 个 例子 除了 能 让 你 感到 情况 紧急 之 外 ， 还 能 让 你 有 如 下 收获 。 
口 文 本 被 标记 为 段落 ， 而 其 中 包含 三 个 行内 元 素 。 

O <strong> 标 签 表 示 重 要 ， 默认 以 粗 体 显 示 。 


口 <em> 标签 表示 强调 ， 默 认 以 斜体 显示 。 
O <abbr> 标 签 表 示 简 写 ， 在 Firefox 中 默认 会 加 上 点 下 划 线 。 





好 了 ， 我 们 已 经 知道 了 HTML 标记 怎么 在 页 面 中 创建 盒子 了 ， 也 知道 了 机 套 标记 实 
际 上 就 是 向 套 盒子 。 那么 , 接 下 来 我 们 就 可 以 聊 一 聊 文 档 对 象 模 型 ( Document Object 
Model, DOM) f, 


文档 对 象 模型 


在 开始 学 习 CSS 之 前 , 关于 HTML 我 们 要 介绍 的 最 后 一 个 知识 点 , 就 是 HTML 结构 
所 对 应 的 文档 对 象 模型 ( 以 下 简称 “DOM”)。DOM 是 从 浏览 器 的 视角 来 观察 页 面 
中 的 元 素 以 及 每 个 元 素 的 属性 ， 由 此 得 出 这 些 元 素 的 一 个 家 族 树 。 通 过 DOM, 可 以 
确定 元 素 之 间 的 相互 关系 。 在 CSS 中 引用 DOM 中 特定 的 位 置 ， 就 可 以 选中 相应 的 
HTML 元 素 ， 并 修改 其 样式 属性 。 


我 们 就 通过 下 面 这 个 例子 来 理解 DOM TI 


// HTML 代码 正确 缩 进 ， 以 表明 标签 的 层次 关系 
«body» 
«section» 
«hi»The Document Object Model«/hi» 
<p>The page's HTML markup structure defines the DOM.«/p» 
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«/section» 
«/body» 


section 


图 1-13 与 标记 对 应 的 简单 DOM 结构 图 


上 面 的 代码 示例 和 图 1-13 展示 了 一 个 典型 的 页 面 结 构 ， 即 结构 化 的 标签 ( 即 
«section» ) 包含 着 几 个 子 内 容 标 签 ( 这 里 的 ch1> 和 <p> )。 代 码 中 用 缩 进 表示 元 素 间 
的 层次 关系 。 这 种 层次 关系 也 可 以 用 垂直 的 、 类 似 家 族 树 的 结构 图 表示 。 





图 1-14 展示 了 标明 元 素 轮廓 的 HTML 元 素 。 


eoo The Document Object Model 





@ Disable - $ Cookies - f CSS ~ = Forms ~ 回 Images * 











图 1-14 ”从 图 中 可 以 看 出 ，body 元 素 包含 着 section 元 素 ， 后 者 进而 包含 一 个 标题 和 一 个 段落 
对 于 这 个 例子 中 的 DOM 层次 ， 我 们 可 以 作 如 下 表述 。 


O section 是 hl 和 p 的 父 元 素 ， 也 是 直接 祖先 元 素 。 

O h1 fll pÆ section 的 子 元 素 ， 也 是 直接 后 代 元 素 。 

O h1 和 p 是 同胞 元 素 ， 它 们 有 共同 的 父 元 素 section. 

Q section, h1 和 p 是 body 的 后 代 元 素 , RA MEWE RETEA RAH )。 

口 section 和 body Æ h1 和 p 的 祖先 元 素 ,或 者 上 面 的 元 素 (在 某 一 层次 上 包含 后 者 )。 


在 本 书后 面 儿 章 里 ， 我 们 会 经 常 使 用 子 元 素 、 父 元 素 、 同 胞 元 素 、 祖 先 元 素 和 后 代 
元 素 这 些 概 念 。 所 以 ， 请 读者 务必 先 对 HTML 创建 的 DOM 的 层次 有 一 个 清晰 的 认 
识 ， 搞 明白 这 些 概 念 的 含义 ， 以 及 它们 之 间 的 骨 套 关系 。 





14 小 结 


CSS 操作 DOM 的 过 程 是 先 选 择 一 个 或 一 组 元 素 , 然后 再 修改 这 些 元 素 的 属性 。 通过 
CSS 修改 了 元 素 后 ， 比 如 修改 了 宽度 或 者 在 标记 里 插入 一 个 伪 元 素 ， 这 些 变 化 会 立 
即 在 DOM 中 发 生 ， 并 体现 在 页 面 上 。 








简 言 之 ， 就 是 通过 HTML 标记 来 构建 DOM， 然 后 在 页 面 初次 加 载 和 用 户 与 页 面 交 
互 时 ， 使 用 CSS 来 修改 DOM. 


1.4 小结 


本 章 讲 解 了 HTML 标签 怎么 为 内 容 提供 结构 ， 以 及 每 个 元 素 会 在 屏幕 上 生成 什么 样 
的 盒子 。 演 示 了 块 级 元 素 和 行内 元 素 的 区 别 ， 以 及 在 元 素 互相 册 套 的 情况 下 ， 它 们 
之 间 会 存在 的 一 种 层次 关系 。 你 知道 了 标记 中 髓 套 的 HTML TRZE RERE 
的 盒子 。 最 后 , RIYAT DOM, 它 是 浏览 器 中 文档 的 模型 , 而 CSS 可 以 修改 DOM 
中 元 素 的 样式 属性 ， 从 而 修改 页 面 本身 的 布局 和 外 观 。 本 章 学 习 的 这 些 基 础 知识 ， 
对 于 使 用 CSS 为 HTML 添加 样式 至 关 重 要 。 第 2 38, 我 们 会 从 CSS 的 规则 和 机 制 人 
手 ， 讲 一 讲 它 是 怎么 对 HTML 发 生 作用 的 。 














= 了 | = 


CSS 工作 原理 





第 1 章 我 们 了 解 了 怎么 通过 HTML 来 创建 文档 结构 。 本 章 ， 我们 来 说 一 说 CSS 规则 
怎么 为 HTML 添加 样式 ， 并 解释 层 释 的 工作 机 制 一 一 当 元 素 的 同一 个 样式 属性 有 多 
种 样式 值 的 时 候 ，CSS 就 要 靠 层 大 机 制 来 决定 最 终 应 用 哪 种 样式 。 
































每 个 HTML 元 素 都 有 一 组 样式 属性 ， 可 以 通过 CSS 来 设 定 。 这 些 属 性 涉及 元 素 在 屏 
幕 上 显示 时 的 不 同方 面 ， 比 如 在 屏幕 上 位 置 、 边 框 的 宽度 ， 文 本 内 容 的 字体 、 字 号 
和 颜色 ， 等 等 。CSS 就 是 一 种 先 选 择 HTML 元 素 ， 然 后 设 定 选中 元 素 CSS 属性 的 机 
制 。CSS 选择 符 和 要 应 用 的 样式 构成 了 一 条 CSS 规则 。 






































好 , 我 们 就 先 聊 一 聊 Css 规则 ,以 及 怎么 把 CSS 规则 应 用 到 HTML 元 素 。 请 读者 跟 
着 我 做 几 个 例子 , 这 些 例 子 都 要 用 到 下 面 这 个 简单 的 HTMLS 模板 。 这 个 模板 的 代码 
也 可 以 登录 http:/www.stylinwithcss.com 下 载 。 


这 段 代码 也 展示 了 CSS 注释 与 HTML 注释 在 格式 上 的 区 别 。 


<!DOCTYPE html» 
«html» 
«head» 
«meta http-equiv-"Content-Type" content-"text/html; 
charset-UTF-8" /» 
«title»HTML5 Template«/title» 
«style» 
/* CSS 规则 放 在 <style> 标 签 中 */ 
«/style» 


2.1 
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«/head» 
«body» 
«1-- HTML 元 素 放 在 <body> 标 签 中 --> 
«/body» 
«/html» 


代码 里 包含 一 个 HTML 的 style 标签。 通过 这 个 标签 可 以 把 CSS 样式 直接 写 在 文 
档 中 ( 用 专业 说 法 ， 是 把 CSS 样式 嵌 人 到 文档 中 )。 浏 览 器 会 负责 把 cstyle> 标 签 中 
的 CSS 样式 应 用 给 <body> 标 签 中 的 HTML 元 素 ( 甚至 包括 <htm1> 标 签 )。 


剖析 CSS 规则 


规则 实际 上 就 是 一 条 完整 的 CSS 指令 。 规 则 声明 了 要 修改 的 元 素 和 要 应 用 给 该 元 素 
的 样式 。 

下 面 就 是 一 条 CSS 规则 ， 它 可 以 把 段落 的 文本 设置 为 红色 。 

p (color:red;) 

把 它 应 用 给 以 下 HTML 标记 

<p>This text is very important!«/p» 


这 个 段落 的 文本 就 会 显示 为 红色 ， 如 图 2-1 所 示 。 








eno The Anatomy of a CSS Rule 
4|» | t e | (ar B 





This text is very important! 





图 2-1 简单 的 CSS 标签 选择 符 给 HTML 段落 文本 添加 颜色 
把 以 上 代码 放 在 我 们 的 HTMLS 模板 中 ， 就 是 这 样 。 


这 个 HTML 模板 以 及 本 书 所 有 代码 示例 ， 都 可 以 到 这 里 下 载 : http//www. stylin- 


Withcss.com。 


«IDOCTYPE html» 
«html» 
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<head> 
«meta charset-"utf-8" /» 
«title»HTML5 Template«/title» 
«style» 
/*CSS 样式 要 嵌入 在 页 面 head 元 素 中 的 <style> 标 签 里 #/ 
p (color:red;) 
«/style» 
«/head» 
«body» 
«1-- HTML 元 素 放 在 <body> 标 签 中 --» 
<p>This text is very important!«/p» 
«/body» 
«/html» 


为 文档 添加 样式 的 三 种 方法 





有 三 种 方法 可 以 把 CSS 添加 到 网 页 中 , 分 别 是 写 在 元 素 标签 里 ( 也 叫 行内 样式 )\ Efe style» 
标签 里 (也 叫 庶 入 样式 ) 和 写 在 单独 的 CSS 样式 表 中 ( 也 叫 链接 样式 ) 。 


行内 样式 

行内 样式 是 写 在 特定 HTML 标签 的 style 属性 里 的 ， 比 如 : 

<p>This paragraph simply takes on the browser's default paragraph style.«/p» 

«p style-"font-size: 12px; font-weight:bold; font-style:italic; color:red;"5By 
adding inline CSS styling to this paragraph, you override the default styles.«/p» 


行内 样式 的 作用 范围 非常 有 限 。 行内 样式 只 能 影响 它 所 在 的 标签 , 而 县 总 会 覆盖 嵌入 样式 和 链 
接 样 式 。 


谋 入 样式 
ERA BY CSS 样式 是 放 在 HTML 文档 的 head 元 素 中 的 ， 比 如 : 


<head> 
<1-- 其 他 head 元 素 (如 meta、title) 放 在 这 里 --> 
«style type-"text/css"» 
h1 (font-size:16px;) 
p (color:blue;] 
«/style» 
«/head» 
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庶 入 样式 的 应 用 范围 仅 限 于 当前 页 面 。 页 面 样式 会 覆盖 外 部 样式 表 中 的 样式 ， 但 会 被 行内 样式 
覆盖 。 像 本 书 前 面 例子 中 那样 使 用 谋 入 方式 为 某 个 组 件 ( 比如 菜单 ) 设计 样式 是 很 方便 的 ， 
73 HTML 和 CSS 同 在 一 页 , 可 以 互相 参照 。 但 是 , 等 到 CSS 样式 设计 完毕 , 组 件 功能 齐备 之 后 ， 
还 是 应 该 把 相应 的 样式 转移 到 外 部 样式 表 ， 以 便 其 他 页 面 也 能 共用 相同 的 样式 。 


链接 样式 


在 创建 包含 多 个 页 面 的 网 站 时 ， 需 要 把 样式 集中 在 一 个 单独 的 文件 里 ， 这 个 文件 就 叫 样式 表 。 
样式 表 其 实 就 是 一 个 扩展 名 为 .css 的 文本 文件 。 可 以 在 任意 多 个 HTML 页 面 中 链接 同一 个 样式 
表 文 件 ， 每 个 页 面 中 只 需 加 入 类 似 下 面 的 这 一 行 代码 即 可 : 


«link href="styles.css" rel="stylesheet" type="text/css" /> 


链接 样式 的 作用 范围 可 以 是 整个 网 站 。 只 要 使 用 <1ink> 标 签 把 样式 表 链接 到 每 个 页 面 ， 相 应 
的 页 面 就 可 以 使 用 其 中 的 样式 。 随 后 ， 只 要 修改 了 样式 表 中 的 样式 ， 改 动 就 会 在 所 有 被 选中 的 
元 素 上 体现 出 来 ， 无论 这 个 元 素 在 哪个 页 面 里 。 这 样 ， 既 可 以 做 到 全 站 页 面 外 观 统一 ， 又 便于 
整 站 样式 更 新 。 


除了 以 上 三 种 为 页 面 添加 样式 的 方法 ,还 有 一 种 在 样式 表 中 链接 其 他 样式 表 的 方法 ， 那 就 应 用 
@import 指令 (是 一 种 at 规则 ) : 


Qimport url(css/styles2.css) 

要 注意 的 是 ，@import 指令 必须 出 现在 样式 表 中 其 他 样式 之 前 ， 否 则 @import 引用 的 样式 表 

不 会 被 加 载 。 
有 一 点 很 重要 , 那 就 是 CSS 样式 是 通过 <style> 标 签 椒 入 到 页 面 里 的 。 当 浏览 器 遇 到 
开标 签 <style> 时 ， 就 会 由 解释 HTML 代码 切换 为 解释 CSS 代码 。 等 遇 到 闭 标 签 
</style> 时 ， 它 会 再 切换 回 解释 HTML 代码 。 


对 于 写 在 样式 表 里 的 样式 ， 就 不 需要 《style> 标 签 了 。 如 果 你 在 样式 表 里 加 上 这 个 
标签 ， 样 式 表 中 的 样式 就 不 会 被 浏览 器 加 载 了 。 


本 章 后 面 的 例子 都 将 使 用 这 个 模板 。 读 者 可 以 把 这 个 模板 写 到 一 个 文本 文件 里 ， 然 
后 保存 为 扩展 名 是 .html 的 文件 。 之 后 , 只 要 像 前 面 那样 , 把 每 个 例子 的 CSS 和 HTML 


IR ER 





辣 烙 贴 到 这 个 模板 中 就 行 了 。 粘 贴 后 保存 ， 再 在 浏览 涡 中 打开 ， 就 可 以 看 到 


21 剖析 CSS 规则 


CSS 规 则 命名 惯例 


CSS 规则 由 选择 符 和 声明 两 部 分 组 成 ， 其 中 选择 符 用 于 指出 规则 所 要 选择 的 元 素 
( 图 2-2 的 示例 选择 符 是 要 选择 段落 ), 声明 则 又 由 两 部 分 组 成 : 属性 和 值 。 属 性 指出 
影响 元 素 哪 方面 的 样式 ( 图 2-2 的 示例 属性 影响 的 是 文本 颜色 )， 值 就 是 属性 的 一 
个 新 状态 ( 图 2-2 中 是 红色 )。 








选择 符 Mi 
| ) 
p {color:red;} 
属性 值 





左 花 括 号 右 花 括号 
图 2-2 ”CSS 规则 分 两 部 分 ， 即 选择 符 和 声明 。 声 明 又 由 两 部 分 组 成 ， 即 属性 和 值 。 
声明 包含 在 一 对 花 括 号 内 








总 体 来 看 ， 选 择 符 后 面 是 左 花 括号 ， 然 后 是 以 冒号 分 隔 的 属性 和 值 ， 二 者 构成 声明 。 
每 个 声明 以 分 号 结尾 ， 最 后 是 结束 规则 的 右 花 括号 。 





建议 读者 仔细 研究 一 下 图 2-2, 搞 明 日 这 张 图 ， 前 面 所 有 这 些 术 语 就 都 明白 了 。 后面 
我 们 经 常会 提 到 这 些 术语 。 


对 这 个 基本 的 结构 ， 有 三 种 方法 可 以 进行 扩展 。 
第 一 种 方法 : 多 个 声明 包含 在 一 条 规则 里 。 
p (color:red; font-size:12px; font-weight:bold;} 


这 样 ， 一 条 规则 就 可 以 把 段落 文本 设置 成 红色 ，12 像素 大 ， 粗 体 。 











注意 三 个 声明 末尾 都 有 一 个 分 号 ， 以 示 分 隔 。 其 中 ， 最 后 一 个 位 于 右 花 括号 之 前 的 
分 号 是 可 选 的 ， 但 我 始终 都 会 加 上 它 。 因 为 将 来 再 添加 声明 时 就 不 用 再 记 着 加 了 。 





有 读者 可 能 会 好 奇 地 想 ， 这 些 属 性 ( 比如 font-size 和 color ) 还 有 其 他 什么 值 呢 ? 
比如 , 指定 颜色 值 的 时 候 是 不 是 可 以 不 用 颜色 名 ,而 用 RGB ( red,green,blue ) 格式 ? 
当然 ， 可 以 。 不 过 ， 我 想 还 是 容 我 把 选择 符 的 工作 机 制 讲 完 吧 。 本 章 后 面 ， 我 们 再 
详细 讲 规则 的 声明 部 分 。 
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第 二 种 方法 : 多 个 选择 符 组 合 在 一 起 。 如果 想 让 <h1>、<h2> 和 <h3> 的 文本 都 变 成 蓝 色 ， 
粗 体 ， 可 以 这 样 分 别 写 : 


h1 (color:blue; font-weight:bold;} 
h2 (color:blue; font-weight:bold;j 
h3 (color:blue; font-weight:bold;j 


但 其 实 ， 把 三 个 选择 符 组 合 在 一 起 也 可 以 ， 这 样 就 能 减少 重复 输入 : 
h1, h2, h3 (color:blue; font-weight:bold;} 


TEANA RES Coe — Je SH d 至 于 选择 符 之 间 的 
空格 ， 随 意 ， 可 加 可 不 加 ， 但 加 了 好 像 看 得 更 清楚 。 








第 三 种 方法 : 多 条 规则 应 用 给 一 个 选择 符 。 假设 ， 你 在 写 完 前 面 那 条 规则 后 ， 又 想 
只 把 h3 变 成 斜体 ， 那 可 以 再 为 h3 写 一 条 规则 : 

h1，h2，h3 (color:blue; font-weight:bold;} 

h3 (font-style:italic;) 

以 上 这 三 种 规则 结构 ， 是 今后 我 们 要 写 的 更 复杂 的 选择 组 合 的 基础 。 更 复杂 的 选择 
组 合 是 啥 意思 ? 比如 说 ， 你 想 写 一 条 CSS 规则 ， 希望 给 位 于 附注 栏 (aside 元 素 ) 
中 的 一 个 段落 添加 样式 ,让 这 个 段落 看 起 来 与 正文 (比如 article 元 素 ) 中 的 段落 不 
一 样 。 但 我 们 到 目前 为 止 看 到 的 规则 ， 会 影响 整个 文档 中 同 种 类 型 的 所 有 元 素 。 下 
面 我 们 就 来 讲 一 讲 怎么 随心 所 欲 地 选择 在 标记 中 位 于 特殊 区 域 的 元 素 。 


所 有 用 于 选择 特定 元 素 的 选择 符 又 分 三 种 。 


口上 下 文选 择 符 。 基 于 祖先 或 同胞 元 素 选 择 一 个 元 素 。 
口 ID 和 类 选择 符 。 基 于 id 和 class 属性 的 值 (你 自己 设 定 ) 选择 元 素 。 
口 属性 选择 符 。 基 于 属性 的 有 无 和 特征 选择 元 素 。 





上 下 文选 择 符 


下 面 , 我 们 就 来 解决 上 一 节 提 到 的 那个 问题 : 你 想 分 别 给 article 和 aside 中 的 段落 
文本 ， 分 别 设置 不 同 的 字号 。 像 这 种 “基于 位 置 ” 变 换 某 个 标签 样式 的 问题 ， 可 以 
用 上 下 文选 择 符 来 解决 ， 本 节 我 们 就 来 讲 一 讲 这 种 选择 符 。 


22 ”上 下 文选 择 符 


上 下 文选 择 符 的 格式 如 下 : 
标签 1 标签 2 { 声 明 } 


其 中 ， 标 签 2 就 是 我 们 想 要 选择 目标 ， 而 且 只 有 在 标签 1 是 其 祖先 元 素 ( 不 一 定 是 
父 元 素 ) 的 情况 下 才 会 被 选中 。 


上 下 文选 择 符 ， 严 格 来 讲 ( 也 就 是 CSS 规范 里 )， 叫 后 代 组 合式 选择 符 ( descendant 
combinator selector )， 就 是 一 组 以 空格 分 隔 的 标签 名 。 用 于 选择 作为 指定 祖先 元 素 后 
代 的 标签 。 


article p {font-weight:bold;} 


这 个 例子 中 的 上 下 文选 择 符 表 明 , 只 有 是 article 后 代 的 p 元 素 才 会 应 用 后 面 的 样式 。 
换 名 话说， 上面 这 条 规则 的 目标 是 位 于 article 上 下 文中 的 p ILR o 


可 以 通过 下 面 这 段 代码 来 更 深入 地 理解 上 下 文选 择 符 的 含义 。 


«body» 
«article» 
«hi»Contextual selectors are «em»very«/em» selective«/h1» 
<p>This example shows how to target a «em»specific«/em» tag.«/p» 
«/article» 
«aside» 
«p»Contextual selectors are «em»very«/em» usefull«/p» 
«/aside» 
«/body» 


以 上 标记 在 没有 应 用 CSS 的 情况 下 ， 如 图 2-3 所 示 。 





eoo Contextual Selectors 


Om ek 9) [ej[n-J[* T 


Contextual selectors are very selective 





This example shows how to target a specific tag. 


Contextual selectors are very useful! 





2-3 ”浏览 器 默认 样式 下 的 标记 
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以 上 标记 创建 的 DOM (文档 对 象 模型 ) 结构 如 图 2-4 所 示 。 


article 





2-4 ”标记 对 应 的 DOM 层次 结构 
图 2-5 展示 了 这 个 DOM 结构 对 应 的 页 面 中 盒子 的 般 套 关系 。 





eoo Contextual Selectors 


C eXejnJier) 


Contextual selectors are very selective 








This example shows how to target a specific |tag. 





2-5 ”每 一 层 结构 都 是 一 个 包 合子 元 素 的 盒子 


> 图 中 盒子 的 轮 廊 是 通过 在 Firefox 的 Web Developer 工具 条 中 选择 Outline Block Level 
r, g 
e Elements 和 Outline Custom Elements ( 可 以 在 弹出 的 窗口 中 输入 行内 元 素 的 名 字 ) 生 


成 的 。 
在 接 下 来 我 向 大 家 展示 那些 瞄准 标记 中 特定 元 素 的 CSS 规则 时 ,建议 大 家 参照 图 2-4 
的 DOM 结构 图 。 


我 们 就 从 最 简单 的 一 个 标签 的 选择 符 开 始 。 


em (color:green;] 
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22 ”上 下 文选 择 符 


这 条 规则 选择 页 面 中 所 有 em 元 素 ， 因 此 三 个 em 元 素 中 的 文本 都 会 变 成 绿色 ， 如 图 
2-6 所 示 ( 图 中 为 浅 灰 色 )。 


eoo Contextual Selectors 


[ 9 [ejip-j c r 


Contextual selectors are very selective 








This example shows how to target a specific tag. 


Contextual selectors are very useful! 





2-6 一 个 简单 的 单 标签 规则 为 所 有 em 元 素 应 用 了 绿色 
接 下 来 修改 这 个 上 下 文选 择 符 ， 让 它 选择 页 面 中 特定 区 域 中 的 标签 。 


p em {color:green;} 


^ 
e 万 万 牢记 ， 上 下 文选 择 符 以 空格 作为 分 隔 符 ， 而 分 组 选择 符 则 以 喜 号 作为 分 隔 符 ， 


不 要 弄 混 。 





现在 ， 前 面 的 p 元 素 是 上 下 文 ， 后 面 的 em 元 素 是 要 选择 的 目标 。 这 里 选择 符 的 意思 
用 白话 说 ， 就 是 :“ 选 择 以 p 元 素 为 祖先 的 所 有 em 元素 。” 好 好 ， 看 看 图 2-4 中 的 结 
构图 ， 哪 些 标签 会 被 这 条 规则 选中 ? 


没 错 ， 你 说 得 对 ， 会 选中 两 个 段落 中 的 em， 而 不 会 选中 标题 中 的 em。 因 为 标题 中 的 
em 并 没有 作为 祖先 的 段落 ， 因 此 这 条 规则 对 它 不 适用 ( 参见 图 2-7 )。 


eoo Contextual Selectors 


OE eK (em-e) 


Contextual selectors are very selective 








This example shows how to target a specific tag. 


Contextual selectors are very useful! 





2-7 在 以 段落 作为 上 下 文 的 情况 下 ， 这 条 规则 没有 影响 标题 中 的 em 
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图 2-8 进一步 展示 了 单 上 下 文选 择 符 的 可 能 性 。 下 面 的 CSS 规则 
article em (color:green;] 
会 得 到 下 面 的 结果 


eoo Contextual Selectors 


(C eur a) (a) (mz) [*]-) 


Contextual selectors are very selective 








This example shows how to target a specific tag. 


Contextual selectors are very useful! 





图 2-8 在 以 article 作为 上 下 文 的 情况 下 ，aside 元 素 中 的 em 没有 受到 影响 


这 次 ， 我 们 使 用 了 article 作为 上 下 文 ， 因 此 该 元 素 中 标题 及 段落 下 的 em 都 变 成 了 
绿色 (网 中 是 浅 灰 色 )。 而 位 于 aside 中 的 em 未 受 影响 ， 因 为 它 没有 article 这 人 么 个 
祖先 元 素 。 注 意 ， 至 于 article 与 en 之 间 还 隔 着 一 个 p 元素 (或 hd 元 素 )， 都 不 影 
响 结果 。 只 要 em 在 整个 层次 结构 中 有 一 个 叫 article 的 祖先 元 素 就 可 以 了 。 





要 是 我 只 想 选 择 标题 中 的 em 呢 ? 那 就 需要 更 加 具体 的 上 下 文 。 
article h1 em (color:green;] 


这 里 选择 符 的 意思 就 是 说 :“ 选 中 的 em 必须 有 一 个 祖先 是 h1， 后 者 进而 还 要 有 一 个 
祖先 是 article。” 





如 图 2-9 所 示 ,为 了 选择 某 个 非常 具体 的 标签 ,有 时 候 不 得 不 串 起 一 串 上 下 文选 择 符 。 


eoo Contextual Selectors 


(9c eK (eme 


Contextual selectors are very selective 








This example shows how to target a specific tag. 


Contextual selectors are very useful! 
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2.3 _ 特殊 的 上 下 文选 择 符 


2.3 ”特殊 的 上 下 文选 择 符 


刚才 ， 我 们 学 习 的 上 下 文选 择 符 是 以 某 个 祖先 标签 作为 上 下 文 。 只 要 有 标签 在 它 的 
层次 结构 “上 游 ”存在 这 么 一 个 祖先 ， 那 么 就 会 选中 该 标签 。 无 ; AANS 
祖先 的 上 下 文 之 间隔 着 多 少 层次 都 没有 关系 。 不 过 , 有 时 候 我 们 可 能 还 会 需要 比 “ 某 
些 祖先 ”更 加 具体 的 上 下 文 。 比 如 说 吧 ， 要 是 你 想 根 据 父 元 素 或 者 同胞 元 素 的 标签 
名 来 选择 元 素 怎么 办 呢 ? 


下 面 我 们 再 用 另 一 段 标记 来 演示 几 种 特殊 的 上 下 文选 择 符 。 


«section» 
«h2»An H2 Heading«/h2» 
<p>This is paragraph 1</p> 
«p»Paragraph 2 has «a href="#">a link«/a» in it.«/p» 
«a href="#">Link</a> 
«/section» 


2.3. 子 选 择 符 > 


标签 1 > 标签 


EEEE E T un Ru. 标签 1 必须 是 标签 2 的 父 元 素 。 与 常 
规 的 上 下 文选 择 符 不 同 ， 这 个 选择 符 中 的 标签 1 不 能 是 标签 2 ii 25 
祖先 元 素 。 


section > h2 (font-style:italic;] 
图 2-10 展示 了 以 上 规则 的 结 


eoo Specialized Contextual Selectors 
[3]» J( e fa ) 











An H2 Heading 
This is paragraph 1 


Paragraph 2 has a link in it. 


Link 





图 2-10 h2 Æ section 的 子 元 素 ， 故 而 被 选中 
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2.3.2 ”紧邻 同胞 选择 符 + 


< 


标签 1+ 标签 2 

标签 2 必须 紧 跟 在 其 同胞 标签 1 的 后 面 。 
h2 + p (font-variant:small-caps;] 

图 2-11 展示 了 这 条 规则 的 效果 。 


eoo Specialized Contextual Selectors 


4|» [ 十 e| (ar ) 
An H2 Heading 














THIS IS PARAGRAPH 1 


Paragraph 2 has a link in it. 


Link 





图 2-1 第 一 个 p 由 于 是 h2 的 紧邻 同胞 而 被 选中 


2.3.3 一般 同 胞 选择 符 ~ 
标签 1 ~ 标签 2 
标签 2 必须 跟 (不 一 定 紧 跟 ) 在 其 同胞 标签 1 后面。 
(D P m sinc itn ORF) 
C saersi 


图 2-12 展示 了 这 条 规则 的 效果 。 











eoo Specialized Contextual Selectors 
| 4 | > | | 十 c | (ar J 
An H2 Heading 


This is paragraph 1 
Paragraph 2 has a link in it. 


Link 





图 2-12 ”只 选中 了 同胞 元 素 
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2.3 特殊 的 上 下 文选 择 符 


2.3.4 ”通用 选择 符 * 


* ( 按 Shift+8 ) 


通用 选择 符 * ( 常 被 称 为 星 号 选择 符 ) 是 一 个 通配符 ， 它 匹配 任何 元 素 ， 因 此 下 面 这 
条 规则 





* {color:green;} 


会 导致 所 有 元 素 ( 的 文本 和 边框 ) 都 变 成 绿色 。 不 过 ， 一般 在 使 用 * 选 择 符 时 ， 都 会 
同时 使 用 男 一 个 选择 符 ， 比 如 : 


color 属性 设 定 的 是 前 景色 。 前 景色 既 影 响 文本 也 影响 边框 , 但 人 们 通常 只 用 它 设 
定 文 本 颜色 。 


p * (color:red;) 

这 样 只 会 把 p 包含 的 所 有 元 素 的 文本 变 成 红色 。 

这 个 选择 符 有 一 个 非常 有 意思 的 用 法 ， 即 用 它 构 成 非 子 选择 符 ， 比 如 : 
section * a {font-size:1.3em;} 


如 图 2-13 所 示 , 任何 是 section 孙子 元 素 ， 而 非 子 元 素 的 a 标签 都 会 被 选中 。 至 于 a 
的 父 元 素 是 什么 ， 没 有 关系 。 














eoo Specialized Contextual Selectors 
4|» [tj e] (ar J 
An H2 Heading 


This is paragraph 1 


Paragraph 2 has a link in it. 


Link 





图 2-13 ”只 选中 了 孙子 元 素 ， 并 未 选中 子 元 素 


总 之 ， 只 有 一 个 标签 名 的 选择 符 会 选中 页 面 中 所 有 相同 标签 的 实例 。 而 通过 上 下 文 
选择 符 ， 则 可 以 指定 标签 必须 具备 相应 的 祖先 或 同胞 。 
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2.4 ID 和 类 选择 符 


ID 和 类 为 我 们 选择 元 素 提供 了 男 一 套 手 段 ,利用 它们 可 以 不 用 考虑 文档 的 层次 结构 。 
只 要 你 在 HTML 标记 中 为 元 素 添加 了 id 和 class 属性 ,就 可 以 在 CSS 选择 符 中 使 用 
ID 和 类 名 ， 直 接 选 中 文档 中 特定 的 区 域 。 








2 可 以 给 id 和 class 属性 设 定 任 何 值 ， 但 不 能 以 数字 或 特殊 符号 开头 。 


2.4.1 类 属性 


类 属性 就 是 HTML 元 素 的 class 属性 , body 标签 中 包含 的 任何 HTML 元 素 都 可 以 添 
加 这 个 属性 。 下 面 这 段 代 码 展示 了 HTML class 属性 的 用 法 。 


«hi class-"specialtext"»This is a heading with the «span»same class«/span» 
as the second paragraph.«/h1» 

<p>This tag has no class.«/p» 

«p class-"specialtext"» When a tag has a class attribute, you can target it 
«span»regardless«/span» of its position in the hierarchy.«/p» 


图 2-14 展示 了 这 段 代码 的 显示 结 


eoo The Class Attribute 
la [^ JL co b 














This is a heading with the same class as the second paragraph. 


This tag has no class. 


When a tag has a class attribute, you can target it regardless of its position in the hierarchy. 





图 2-14 ”应 用 默认 样式 的 效果 
， 我 已 经 给 其 中 两 个 标签 添加 了 specialtext 类 





1. 类 选择 符 


^ 
TY 、> È xc J oa X x DEP n 
269 注意 ， 类 选择 符 前 面 是 点 (. )， 紧 跟着 类 名 ， 两 者 之 间 没 有 空格 。 
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类 选择 符 就 是 在 HTML 类 名 前 面 加 一 个 点 ( 英文 句号 )。 
好 ， 我 们 来 为 标签 应 用 如 下 CSS 样式 。 


p {font-family:helvetica, sans-serif; font-size:1.2em;} 
.Specialtext {font-style:italic;} 


图 2-15 展示 了 应 用 样式 后 的 效果 。 


eoo The Class Attribute 


aj») lha] ea D 











This is a heading with the same class as the second paragraph. 


This tag has no class. 


When a tag has a class attribute, you can target it regardless of its position in the hierarchy. 





2-15 ”两 个 段落 中 文本 的 字体 都 变 成 了 Helvetica， 而 标题 和 第 二 个 段落 都 有 specialtext 3É, 
所 以 都 变 成 了 斜体 

应 用 这 两 条 规则 的 结果 ， 就 是 两 个 段落 都 以 Helvetica 字体 ( 如 果 本 地 没有 该 字体 
则 使 用 浏览 器 通用 的 无 衬 线 字 体 ) 显示 ， 而 带 有 specialtext 类 的 段落 同时 也 变 成 
了 斜体 。 ha 中 的 文本 仍然 使 用 浏览 右上 默认 字体 (一般 是 Times ), 因 为 Helvetica F 
体 只 应 用 给 段落 ,不 过 由 于 它 也 有 specialtext 类 ， 所 以 也 应 用 了 斜体。 另外 , 没 
有 默认 样式 的 span， 由 于 我 们 没有 明确 为 其 添加 样式 ， 所 以 就 继承 了 其 父 元 素 的 
样式 。 





如 果 你 只 想 瞄准 带 有 这 个 类 的 段落 ， 可 以 把 标签 名 和 类 选择 符 写 在 一 块 ， 比 如 : 





p {font-family:helvetica, sans-serif; font-size:1.2em;} 

.Specialtext {font-style:italic;} 

p.specialtext (color:red;) 

如 图 2-16 所 示 ， 第 三 条 CSS 规则 只 选择 带 specialtext 类 的 段落 。 像 这 样 组 合 标签 
名 和 类 选择 符 ， 可 以 让 你 更 精确 地 选择 特定 的 标签 。 
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eoo The Class Attribute 


> (Qr J 
(EO ER e | (a ) 











This is a heading with the same class as the second paragraph. 


This tag has no class. 


When a tag has a class attribute, you can target it regardless of its position in the hierarchy. 





图 2-16 ”通过 组 合 标签 名 和 类 选择 符 ， 可 以 让 选择 符 更 具体 
下 面 我 们 就 把 这 个 技巧 进一步 发 挥 一 下 。 


p (font-family:helvetica, sans-serif; font-size:1.2em;] 
.specialtext (font-style:italic;] 

p.specialtext (color:red;] 

p.specialtext span [font-weight:bold;) 


如 图 2-17 所 示 , 单词 “regardless” 变 成 了 粗 斜体 ， 因 为 包含 它 的 span 位 于 一 个 带 有 
specialtext 类 的 段落 中 。 这 四 条 规则 全 都 会 对 span 产生 影响 ， 因 为 它 从 其 父 元 素 ， 
那个 带 specialtext 类 的 段落 那里 , 继承 了 前 三 条 规则 的 样式 。 我 们 已 经 两 次 提 到 了 
继承 ， 关 于 继承 我 们 放 在 本 章 后 面 再 详细 介绍 。 


eoo The Class Attribute 


| ENS Ex e Ko d 











This is a heading with the same class as the second paragraph. 


This tag has no class. 


When a tag has a class attribute, you can target it regardless of its position in the hierarchy. 





图 2-17 ” 青 添加 一 个 选择 符 ， 可 以 把 选择 目标 锁定 为 更 特殊 的 元 素 
3. 多 类 选择 符 
可 以 给 元 素 添 加 多 个 类 ， 比 如 : 


«p class-"specialtext featured"»Here the span tag «span»may or may not«/span» 
be styled.«/p» 


多 个 类 名 ， 如 这 里 的 specialtext 和 featured， 放 在 同一 对 引号 里 ,用 空格 分 隔 。 实 
际 上 ， 更 准确 的 说 法 ， 就 应 该 是 HTML 的 class 属性 可 以 有 多 个 空格 分 隔 的 值 。 要 


24 ID 和 类 选择 符 


选择 同时 存在 这 两 个 类 名 的 元 素 ， 可 以 这 样 写 : 
.Specialtext. featured {font-size:120%;} 


注意 ，CSS 选择 符 的 两 个 类 名 之 间 没 有 空格 ， 因 为 我 们 只 想 选 择 同时 具有 这 两 个 类 
名 的 那个 元 素 。 如 果 你 加 了 空格 , 那 就 变 成 了 “和 祖先/ 后代” 关系 的 上 下 文选 择 符 了 。 


每 个 类 名 分 别 用 一 个 HTML class 属性 的 做 法 是 常见 的 错误 ， 正确 的 做 法 是 像 上 面 
的 代码 那样 ， 只 用 一 个 class 属性 ， 但 给 它 设 定 多 个 值 。 本 章 后 面 还 会 讲 到 多 类 名 
的 实际 用 法 。 


2.4.2 ID 属性 
ID 与 类 的 写法 相似 ， 而 且 表 示 ID 选择 符 的 # ( 井 号 ) 的 用 法 ,也 跟 表示 类 选择 符 的 . 
(句号 ) 类 似 。 
如 果 有 一 个 段落 像 下 面 这 样 设 定 了 ID 属性 
«p id="specialtext">This is the special text.«/p» 
那么 ， 相 应 的 ID 选择 符 就 是 这 样 的 : 
#specialtext (CSS 样式 声明 } 
或 者 这 样 的 : 
p#specialtext (CSS 样式 声明 } 


除 此 之 外 ，D 与 类 的 用 法 都 一 样 ， 而 且 我 们 前 面 讨论 的 关于 类 选择 符 的 ( 几乎 ) 一 
切 ， 都 适应 于 ID 选择 符 。 那 两 者 到 底 有 什么 区 别 呢 ? 


用 于 页 内 导航 的 ID 


ID 也 可 以 用 在 页 内 导航 链接 中 。 下 面 就 是 一 个 链接 ， 其 目标 是 同一 页 的 另 一 个 位 置 。 


«a href-"itbio"»Biography«/a» 


看 到 href 属性 值 开头 的 # 了 吗 ? 它 表示 这 个 链接 的 目标 在 当前 页 面 中 , 因而 不 会 触发 浏览 器 加 
载 页 面 (如果 没 有 #， 浏 览 器 就 会 尝试 加 载 bio 目录 下 的 默认 页 面 了 ) o 
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使 用 与 CSS 选择 符 里 相同 的 ID 名 语法 ， 可 以 把 链接 导航 到 同一 页 面 中 的 目标 ID。 在 这 个 页 
面 的 下 方 ， 应 该 有 对 应 的 目标 元 素 。 


«h3 id-"bio"»Biography«/h3» 
<p>I was born when I was very young---«/p» 


同样 要 注意 ， 作 为 目标 的 ID 值 前 面 是 没有 # 的 ， 就 是 一 个 普通 的 ID 值 。 


用 户 单 击 前 面 的 链接 时 ， 页 面 会 向 下 滚动 到 ID 值 为 bio 的 h3 元 素 的 位 置 。 如 果 链 接 的 href 
属性 里 只 有 一 个 #， 那 么 点 击 该 链接 会 返回 页 面 项 部 。 


«a href="#">Back to Top«/a» 
换 句 话说， 要 写 一 个 “返回 项 部” 链接， 根本 不 需要 ID 为 # 的 目标 元 素 。 


另外 , 如 果 你 暂时 不 知道 某 个 href 应 该 放 什 么 URL,， 也 可 以 用 # 作 为 占 位 符 , 但 不 能 把 该 属性 
留 空 。 因 为 href 属性 值 为 空 的 链接 的 行为 跟 正 常 链接 不 一 样 。 这 样 ， 团 队 中 的 其 了 他 人 将 来 可 
以 用 中 间 层 ( 比如 PHP) 变量 替换 #， 以 便 动态 接收 来 自 数据 库 的 URL。 


2.4.3 ”什么 时 候 用 ID， 什 么 时 候 用 类 
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乍 一 看 , 类 和 TD 都 是 用 于 在 标记 中 标识 特定 标签 的 HTML 属性 , 似乎 完全 是 可 以 相 
互 取 代 嘛 。 然 而 ,它们 的 用 途 实 际 上 大 不 相同 。 








1. 什么 时 候 使 用 ID 


ID 的 用 途 是 在 页 面 中 唯一 地 标识 一 个 元 素 。 正 因为 如 此 , 同一 个 页 面 中 的 每 一 个 ID 
属性 ， 都 必须 有 独一无二 的 值 ( 名字 )。 好 吧 ， 换 一 个 角度 讲 ， 每 个 ID 名 在 页 面 中 
都 只 能 用 一 次 。 








«nav id="mainmenu"> 

也 可 以 使 用 ID 把 JavaScript 与 某 个 标签 关联 起 来 ( 比如 ， 当 用 户 和 鼠标 移动 到 一 个 链 
接 上 面 时 ， 运 行 激活 动画 的 脚本 )。ID 值 的 唯一 性 对 JavaScript 尤其 重要 ， 否 则 就 会 
3r & JavaScript 行为 异常 。 








在 这 里 , 页 面 中 就 不 能 再 有 其 他 元 素 使 用 mainmenu 作为 ID 名 了 。 为 了 标识 页 面 的 某 
一 部 分 ， 比 如 主导 航 菜 单 ， 可 以 为 nav (navigation， 导 航 ) 添加 一 个 ID 属性 ， 并 让 





24 ID 和 类 选择 符 


它 包 含 菜单 元 素 。 


«nav id-"mainmenu"» 
«ul» 
<li><a href="#">Yin</a></li> 
<li><a href="#">Yang</a></li> 
</ul> 
</nav> 


有 了 用 唯一 ID 标识 的 菜单 之 后 , 就 可 以 使 用 上 下 文选 择 符 来 选择 其 中 包含 的 各 种 类 
型 的 标签 了 。 比 如 ， 可 以 将 这 个 菜单 中 的 链接 设置 为 橙色 ， 同 时 又 不 会 影响 页 面 中 
的 其 他 链接 : 








#mainmenu a (color:orange;] 


利用 唯一 站 ,可 以 在 CSS 中 方便 地 定位 到 这 个 元 素 ， 以 及 它 的 子 元 素 。 到 了 后 面 读 
者 会 发 现 ， 我 经 常会 给 页 面 中 每 个 顶级 区 域 都 添加 一 个 ID ， 从 而 得 到 非常 明确 的 上 
下 文 ， 以 便 编写 CSS 时 只 选择 藤 套 在 相应 区 域内 的 标签 。 





差不多 了 吧 , 你 已 经 理解 了 ID 表示 的 是 页 面 中 一 个 唯一 的 HTML 元 素 , 下 面 就 来 聊 
一 聊 什么 时 候 使 用 类 吧 。 


2. 什么 时 候 使 用 类 
类 的 目的 是 为 了 标识 一 组 具有 相同 特征 的 元 素 ， 比 如 本 章 前 面 例子 中 的 那个 


specialtext 类 。 





在 下 面 这 个 孩子 名 字 的 列表 中 ， 我 想 把 男孩 的 名 字 变 成 蓝 色 ， 把 女孩 的 名 字 变 成 粉 
红色 。 首 先 ， 我 用 类 在 标记 中 标识 出 了 性 别 。 





«nav» 
«ul» 
«li class-"boy"»«a href-"f"»Alan«/a»«/li» 
«li class-"boy"»«a href-"f"»Andrewc/a»«/li» 
«li class-"girl"»«a href-"f"»Angela«/a»«/li» 
«li class-"boy"»«a href-"f"»Angus«/a»«/li» 
«li class-"girl'»«a href-"f"»Anne«/a»«/li» 
«li class-"girl"»«a href-"f"»Annette«/a»«/li» 
«/ul» 
«/nav» 
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然后 ， 再 用 CSS 为 链接 应 用 颜色 : 


.boy a {color:#6CF;}/* 蓝 色 */ 

.girl a {color:#F9C;}/* 粉 红色 */ 

第 一 条 规则 选择 所 有 类 名 为 boy 的 祖先 元 素 包 含 的 a 元 素 ， 第 二 条 规则 选择 所 有 类 
名 为 girl 的 祖先 元 素 包含 的 a 元 素 。 这 两 种 情况 下 的 祖先 元 素 ， 都 是 作为 相应 链接 
父 元 素 的 1i 元 素 。 


不 要 乱用 类 


要 避免 Web 开发 专家 Jeffrey Zeldman 说 的 “类 泛滥 一 标记 中 的 麻疹 ”出 现 。 什 么 意思 呢 ? 
就 是 说 你 不 要 像 使 用 ID 一 样 ， 每 个 类 都 指定 一 个 不 同 的 类 名 ， 然 后 再 为 每 个 类 编写 规则 。 如 
果 你 确实 有 这 种 随意 使 用 类 的 习惯 , 那 说 明 你 可 能 像 大 多 数 对 CSS 充满 激情 的 初学 者 一 样 , 还 
不 了 解 继 承 和 上 下 文选 择 符 的 作用 。 于 是 ,你 可 能 会 给 每 个 标签 都 重复 写 同样 的 样式 (比如 为 
页 面 中 很 多 标签 分 别 指定 相同 的 字体 ) 。 实 际 上 ,继承 和 上 下 文选 择 符 能 让 不 同 的 标签 共享 样 
式 ， 从 而 降低 你 需要 编写 和 维护 的 CSS 量 。 


2.4.4 ID 和 类 的 小 结 


2.5 
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ID 的 用 途 是 在 页 面 标记 中 唯一 地 标识 一 个 特定 的 元 素 。 它 能 够 为 我 们 编写 CSS 规则 
提供 必要 的 上 下 文 ， 排 除 无 关 的 标记 ， 而 只 选择 该 上 下 文中 的 标签 。 

相对 来 说 ， 类 是 可 以 应 用 给 任意 多 个 页 面 中 的 任意 多 个 HTML 元 素 的 公共 标识 符 ， 
以 便 我 们 为 这 些 元 素 应 用 相同 的 CSS 样式 。 而 且 ， 使 用 类 也 让 为 不 同 标签 名 的 元 素 
应 用 相同 的 样式 成 为 可 能 。 


属性 选择 符 


到 目前 为 止 , 我 们 已 经 学 习 了 使 用 上 下 文选 择 符 、ID 和 类 选择 HTML 元素。 再 有 一 
种 选择 元 素 的 方法 是 属性 选择 符 ， 它 基于 HTML 标签 的 属性 选择 元 素 。 以 下 是 两 个 
常见 的 例子 。 


2.5 ”属性 选择 符 


2.5.1 属性 名 选择 符 


标签 名 [属性 名 ] 
选择 任何 带 有 属性 名 的 标签 名 。 





比如 ， 下 面 的 Css 
img[title] (border:2px solid blue;] 


会 导致 像 下 面 这 个 带 有 title 属性 的 HTML img 元 素 显 示 2 像素 宽 的 蓝 色 边框 , 至 于 
title 属性 有 什么 值 ， 无 关 紧 要 ， 只 要 有 这 个 属性 在 就 行 啦 。 











«img src-"images/yellow flower.jpg" title="yellow flower" alt="yellow flower" /> 
什么 情况 下 会 用 到 这 个 属性 选择 符 呢 ? 比如 , 可 以 在 用 户 鼠 标 移动 到 这 些 图 片上 时 ， 
此 时 浏览 器 会 显示 一 个 (利用 title 属性 中 的 文本 生成 的 ) 提示 条 。 一 般 来 说 ， 人 
们 经 常 给 alt 和 title 属性 设 定 相 同 的 值 。alt 属性 中 的 文本 会 在 图 片 因 故 未 能 加 载 
时 显示 ， 或 者 由 屏幕 阅读 器 肝 读 出 来 。 而 title 属性 会 在 用 户 鼠 标 移动 到 图 片上 时 ， 
显示 一 个 包含 相应 文本 的 提示 。 


2.5.2 ”属性 值 选择 符 


标签 名 [属性 名 =" 属 性 值 "] 
~ 
Q 在 HTML5 中 ， 属 性 值 的 引号 可 加 可 不 加 ， 在 此 为 了 清楚 起 见 ， 我 们 加 了 。 











选择 任何 带 有 值 为 属性 值 的 属性 名 的 标签 名 。 








这 个 选择 符 可 以 让 你 控制 到 属性 的 值 是 什么 。 例 如 ， 这 条 规则 











img[title-"red flower"] {border:4px solid green;} 


在 图 片 的 title 属性 值 为 red flower 的 情况 下 ， 才 会 为 图 片 添加 边框 。 换 名 话说， 
下 面 这 个 img 元 素 就 会 被 加 上 边框 。 





«img src-"images/red flower.jpg" title-"red flower" alt-"red flower" /> 


当然 ， 属 性 选择 符 还 有 其 他 形式 ， 感 兴趣 的 话 ， 就 请 访问 http//www.stylinwith- 


css.com IE, 
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2.5.3 ”属性 选择 符 的 小 结 


2.6 


基于 属性 名 和 属性 的 其 他 特征 选择 元 素 ， 为 我 们 提供 了 为 一 种 区 别 对 待 相同 标签 的 
机 会 。 只 要 事先 规划 好 ， 就 可 以 编写 出 适合 属性 选择 符 的 标记 来 。 





到 现在 为 止 ， 我 们 介绍 的 选择 符 都 有 一 个 共同 点 ， 即 它们 针对 的 都 是 标记 中 的 某 个 
部 分 ， 比 如 标签 名 、 类 名 、ID 、 属 性 或 属性 值 。 然 而 ， 使 用 CSS 还 可 以 在 某 些 事件 
发 生 时 ， 改 变 某 些 元 素 的 样式 ， 比 如 用 户 鼠 标 悬 停 在 一 个 链接 上 。 而 这 就 要 靠 伪 类 
来 实现 了 。 


伪 类 
伪 关 这 个 叫 法 源 自 它们 与 类 相似 ， 但 实际 上 养 没 有 类 会 附加 到 标记 中 的 标签 上 。 伯 
类 分 两 种 。 


Q UI (User Interface， 用 户 界 面 ) 伪 类 会 在 HTML 元 素 处 于 某 个 状态 时 ( 比如 鼠标 
旧 针 位 于 链接 上 )， 为 该 元 素 应 用 CSS 样式 。 

a 结构 化 伪 类 会 在 标记 中 存在 某 种 结构 上 的 关系 时 (如 某 个 元 素 是 一 组 元 素 中 的 第 
一 个 或 最 后 一 个 ) ， 为 相应 元 素 应 用 CSS 样式 。 





2.6.1 UI 伪 类 
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UI 伪 类 会 基于 特定 HTML 元 素 的 状态 应 用 样式 。 最 常 使 用 UI 伪 类 的 元 素 是 链接 Ca 
元 素 )， 利 用 UI 伪 类 ， 链 接 可 以 在 用 户 鼠 标 悬 停 时 改变 文本 颜色 ， 或 者 去 掉 文 本 的 
下 划 线 。 此 外 ， 还 可 以 有 其 他 响应 方式 ， 比 如 悬 停 时 显示 一 个 信息 面板 ， 相 关内 容 
在 我 们 讨论 交互 组 件 的 时 候 再 聊 。 











1. 链接 伪 类 
针对 链接 的 伪 类 一 共有 4 个 ， 因 为 链接 始终 会 处 于 如 下 4 种 状态 之 一 。 


口 Link。 此 时 ， 链 接 就 在 那儿 等 着 用 户 点 击 。 
口 Visited。 用 户 此 前 点 击 过 这 个 链接 。 
口 Hover。 鼠 标 指 针 正 悬 停 在 链接 上 。 





2.6 h% 


口 Active。 链 接 正 在 被 点 击 ( 鼠标 在 元 素 上 按 下 ， 还 没有 释放 ) 
以 下 就 是 这 些 状态 对 应 的 4 个 伪 类 选择 符 (使 用 了 a 选择 符 和 一 些 示 例 声明 ): 


a:link {color:black;} 

a:visited {color:gray;} 

a:hover {text-decoration:none;} 
a:active {color:red;} 


由 于 这 4 个 伪 类 的 特 指 度 ( 本 章 后 面 再 讨论 特 指 度 ) 相同 ， 如 果 不 按照 这 里 列 出 
的 顺序 使 用 它们 ， 浏 览 器 可 能 不 会 显示 预期 结果 。 为 了 好 记 ， 我 建议 大 家 可 以 这 
是 


器 可 能 
么 想 :“LoVe? HA!” 大 写字 母 就 是 每 个 伪 类 的 头 一 个 字母 。 


选择 符 中 与 众 不 同 的 :〈 冒号 ) 好 像 在 向 我 们 宣示 :“ 我 是 一 个 伪 类 1” 


一 个 冒号 ( : ) 表示 伪 类 ， 两 个 冒号 ( :: ) 表示 CSS3 新 增 的 伪 元 素 。 尽 管 浏 览 器 目 
前 都 支持 对 CSS 1 和 CSS 2 的 伪 元 素 使 用 一 个 冒号 ， 但 希望 你 能 习惯 于 用 双 冒 号 代 
替 单 冒号 ， D nc RTI 更 多 相关 信息 ， 可 以 
参见 这 里 : http:/www.w3.org/TR/2005/WD-css3- selectors-20051215/#pseudo-elements。 


根据 前 面 的 声明 , 链接 在 初始 状态 时 是 黑色 ( 默认 带 下 划 线 )。 当 鼠标 移 到 上 面 时 ( 悬 
停 状 态 )， 链 接 的 下 划 线 消失 ， 颜 色 仍 然 是 黑色 。 当 用 户 在 链接 上 按 下 鼠标 时 (活动 
状态 )， 链 接 变 成 红色 。 而 在 链接 被 点 击 后 ， 也 就 是 鼠标 在 链接 上 按 下 ， 又 在 链接 上 
释放 后 ， 会 触发 浏览 器 打开 URL， 此 后 (或 者 更 准确 地 说 ， 到 浏览 器 访问 历史 中 的 
这 个 URL 过 期 或 被 用 户 删 除 之 前 )， 链 接 会 一 直 显 示 为 灰色 。 




















不 一 定 非得 把 这 4 个 状态 都 写 出 来 。 如 果 你 只 想 定义 :link 和 :hover 状态 ， 没 问题 ， 
大 多 数 情 况 下 这 也 足够 了 。 但 如 果 你 有 一 个 长 长 的 目录 链接 ， 那 么 用 稍 浅 一 些 的 颜 
色 显 示 出 那些 已 经 访问 过 ( 即 点 击 过 ) 的 链接 ， 对 用 户 会 很 有 帮助 。 然 而 ， 修 改 导 
MA visited 状态 的 颜色 就 没有 什么 意义 了 。 


我 一 般 就 定义 一 个 a 状态 和 一 个 :hover 状态 , 后 者 就 是 为 了 让 用 户 (在 鼠标 悬 停 时 ) 
知道 相应 的 元 素 是 不 是 可 以 点 。 

以 这 种 方式 为 链接 的 不 同 的 状态 添加 样式 是 不 错 ， 但 要 发 挥 这 些 链 接 伪 类 的 真正 
威力 ， 还 是 得 把 它们 用 到 上 下 文选 择 符 中 。 这 样 ， 就 可 以 让 不 同 区 块 内 的 链接 具 
有 不 同 的 外 观 和 行为 了 。 比 如 ， 稍 后 我 们 会 看 到 ， 通 过 在 上 下 文选 择 符 中 使 用 链 
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接 伪 类 ， 可 以 轻易 地 为 nav, footer, aside 和 article 元 素 中 的 链接 应 用 不 同 的 
外 观 和 行为 。 





注意 ， 有 些 伪 类 可 以 用 于 任何 元 素 ， 而 不 仅仅 是 a 元 素 。 比 如 ， 下 面 这 条 规则 能 让 
段落 背景 在 鼠标 悬 停 时 变 成 灰色 : 





p:hover (background-color:gray;] 

2. :focus 伪 类 

e: focus 

在 这 个 以 及 后 续 的 例子 中 ，e 表 示 任何 元 素 ， 如 p、h1、section， 等 等 。 


表单 中 的 文本 字段 在 用 户 单 击 它 时 会 获得 焦点 ， 然 后 用 户 才能 在 其 中 输入 字符 。 下 
面 的 规则 


input:focus (border:1px solid blue;} 

会 在 光标 位 于 input 字段 中 时 ， 为 该 字段 添加 一 个 蓝 色 边框 。 这 样 可 以 让 用 户 明 确 
地 知道 输入 的 字符 会 出 现在 哪里 。 

3. :target 伪 类 

e:target 

如 果 用 户 点 击 一 个 指向 页 面 中 其 他 元 素 的 链接 ,， 则 那个 元 素 就 是 目标 (target ), 可 以 
用 :target 伪 类 选中 它 。 

对 于 下 面 这 个 链接 

«a href="#more info"»More Information«/a» 

位 于 页 面 其 他 地 方 、ID 为 more info 的 那个 元 素 就 是 目标 。 该 元 素 可 能 是 这 样 的 : 
<h2 id-"more info"»This is the information you are looking for.«/h2» 

那么 ， 如 下 CSS 规则 

timore info:target {background:#eee;} 


会 在 用 户 单 击 链接 转向 ID 为 more info 的 元 素 时 ， 为 该 元 素 添 加 浅 灰色 背景 。 


2.6 h% 


维基 百科 在 其 引证 中 大 量 使 用 了 :target H, 维基 百科 的 引证 链接 就 是 正文 里 那些 
不 起 眼 的 数字 链接 。 引 证 本 身 则 位 于 长 长 的 页 面 的 最 下 方 。 如 果 没 有 :target 应 用 的 
突出 显示 ， 很 难 知道 你 点 击 的 链接 对 应 着 一 大 堆 引 证 中 的 哪 一 个 。 

















2.6.2 ”结构 化 伪 类 


Ww 


e» 


结构 化 伪 类 可 以 根据 标记 的 结构 应 用 样式 ， 比 如 根据 某 元 素 的 父 元 素 或 前 面 的 同胞 
元 素 是 什么 。 
1.:first-child 和 :last-child 


e:first-child 
e:last-child 


:first-child 代表 一 组 同胞 元 素 中 的 第 一 个 元 素 ， 而 :1ast-child 则 代表 最 后 一 个 。 
比如 ， 把 下 面 的 规则 


ol.results li:first-child {color:blue;} 
应 用 给 以 下 标记 : 


«ol class="results"> 
«li»My Fast Pony«/li» 
«li»Steady Trotter«/li» 
«li»Slow Ol' Nag«/li» 
«/ol» 


文本 “My Fast Pony” 就 会 变 成 蓝 色 。 如 果 选 择 符 改 成 这 样 : 
ol.results li:last-child {color:red;} 

那 变 成 红色 的 文本 就 是 “Slow OP Nag” f. 

2.:nth-child 

e:nth-child(n) 

e 表 示 元 素 名 ，n 表 示 一 个 数值 (也 可 以 使 用 odd 或 even ). 
例如 ， 

li:nth-child(3) 
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会 选择 一 组 列表 项 中 的 每 个 第 三 项 。 


:nth-child 伪 类 最 常用 于 提高 表格 的 可 读 性 ， 比 如 像 第 6 章 中 那样 ， 对 表格 的 所 有 
行 交 替 应 用 不 同 颜色 。 





还 有 其 他 一 些 结构 化 伪 类 ， 完 整 的 信息 请 参考 这 里 : http:/www.stylinwithcss.com。 


伪 元 素 

顾名思义 ， 伪 元 素 就 是 你 的 文档 中 若 有 实 无 的 元 素 。 以 下 我 们 介绍 几 个 最 有 用 的 伪 
元 素 ， 其 他 伪 元 素 请 参考 http:/www.stylinwithcss.com。 

1. ::first-letter 伪 元 素 

e: :first-letter 

比如 ， 以 下 CSS 规则 : 

p::first-letter (font-size:30096;) 

可 以 得 到 如 图 2-18 所 示 的 段落 首 字 符 放 大 的 效果 。 


如 果 不 用 伪 元 素 创 建 这 个 首 字符 放大 效果 ， 必 须 手 工 给 该 字母 加 上 <span> 标 签 ， 
然后 再 为 该 标签 应 用 样式 。 而 伪 元 素 实 际 上 是 替 我 们 添加 了 无 形 的 标签 。 





eoo Pseudo-Elements 
[s] ca ) 


i pt text illustrates that the :first-letter pseudo-element can enlarge the 


first letter of a paragraph. 





E 2-18 .::first-letter 伪 元 素 可 以 用 来 创建 首 字 符 放 大 效果 
2. ::first-line 伪 元 素 
e: :first-line 


可 以 选中 文本 段落 (一般 情 况 下 是 段落 ) 的 第 一 行 。 例 如 


2.7_” 伪 元 素 


p::first-line (font-variant:small-caps;) 


可 以 把 第 一 行 以 小 型 大 写字 母 显 示 ， 见 图 2-19。 














eoo Pseudo-Elements 
aja jlt ea ) 
THE :FIRST-LINE PSEUDO-ELEMENT CAN STYLE THE FIRST LINE OF A PARAGRAPH. 


In this case, the first line is styled in small caps. 





图 2-19 FB::first-line 伪 元 素 把 第 一 行 变 成 了 小 型 大 写字 母 。 注 意 ，: :first-line 伪 元 素 
的 长 度 会 随 浏览 器 窗口 大 小 的 变化 而 改变 。 


3.::before 和 ::after 伪 元 素 
以 下 两 个 伪 元 素 


e: :before 
e: :after 


可 用 于 在 特定 元 素 前 面 或 后 面 添加 特殊 内 容 。 
以 下 标记 

«p class-"age"»25«/p» 

和 如 下 样式 


p.age::before (content:"Age: ";) 
p.age::after (content:" years.";) 


V 
zO 注意 ， 每 个 content 属性 值 中 都 包 含 了 空格 ， 以 便 输 出 结果 中 有 适当 的 空 
能 得 到 以 下 结果 : 
Age: 25 years. 


如 果 标 签 中 的 内 容 是 通过 数据 库 查 询 生 成 的 结果 ， 那 么 用 这 种 技巧 再 合适 不 过 了 。 
因为 所 有 结果 都 是 数字 ， 使 用 这 两 个 伪 元 素 可 以 在 把 数字 呈现 给 用 户 时 ， EU. 
性 文字 。 


这 个 例子 展示 了 对 : :before 和 ::after 伪 元 素 很 基本 又 很 实用 的 应 用 。 后 面 我 还 会 给 
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大 家 展示 这 两 个 伪 元 素 的 其 他 用 法 ， 比 如 在 应 用 它们 的 元 素 外 面 附着 一 个 动态 的 新 
元 素 ， 从 而 得 到 一 种 有 趣 的 布局 效果 。 


搜索 引 营 不 会 取得 伪 元 素 的 信息 ( 因为 它 在 标记 中 并 不 存在 )。 因 此 ， 不 要 通过 伪 
元 素 添 加 你 想 让 搜索 引擎 索引 的 重要 内 容 。 


好 啦 ， 到 现在 为 止 ， 我 们 已 经 把 各 种 CSS 选择 符 都 介绍 完了 。 接 下 来 ， 需 要 更 进 一 
步 ， 探 讨 一 下 CSS 的 工作 原理 。 


在 一 个 较 大 的 样式 表 中 ， 可 能 会 有 很 多 条 规则 都 选择 同一 个 元 素 的 同一 个 属性 。 比 
如 ,一 个 带 有 类 属性 的 段落 ， 可 能 会 被 一 条 以 标签 名 作 选 择 符 的 规则 选中 并 指定 一 
种 字体 ， 而 为 一 条 以 该 段落 的 类 名 作 选 择 符 的 规则 却 会 给 它 指定 为 一 种 字体 。 我 们 
知道 ， 字 体 属 性 在 任意 时 刻 都 只 能 应 用 一 种 设 定 ， 那 此 时 该 应 用 哪 种 字体 呢 ? 为 解 
决 类 似 的 冲突 ， 确 定 哪 条 规则 “胜出 ”并 最 终 被 应 用 ，CSS 提供 了 三 种 机 制 : 继承 、 
层 琶 和 特 指 。 接 下 来 的 三 节 ， 就 分 别 讨论 这 三 种 机 制 。 




















继承 


就 像 你 总 是 指望 着 腰 缠 万 贯 的 老 答 有 一 天 会 留 给 你 一 大 笔 遗 产 一 样 ，CSS 中 的 祖先 
元 素 也 会 向 后 代 传递 一 样 东 西 : CSS 属性 的 值 。 还 记得 吗 ， 我 们 在 第 1 章 讲 文档 层 
次 结构 时 提 到 过 , body 是 所 有 元 素 的 老 祖宗 , 所 有 标签 都 是 它 的 后 代 。 那么 由 于 CSS 
继承 的 约定 ， 如 果 我 们 为 body 像 下 面 一 样 写 一 条 规则 





body {font-family:helvetica, arial, sans-serif;} 


那么 ， 文 档 中 的 所 有 元 素 ， 无 论 它 在 层次 结构 中 多 么 靠 下 ， 都 将 继承 这 些 样式 ， 以 
Helvetica 字体 ( 或 者 在 Helvetica 字体 无 效 时 以 其 他 字体 代替 ) 显示 各 自 包含 的 文本 。 
继承 给 我 们 带 来 的 效率 是 显而易见 的 ， 全 站 的 主 字体 只 要 在 某 个 上 层 元 素 上 指定 即 
可 ， 无须 在 每 一 个 标签 上 分 别 指定 。 而 对 于 个 别 想 使 用 不 同 字体 的 元 素 ， 只 要 个 别 
设 定 font-family 属性 就 好 了 。 


CSS 中 有 很 多 属性 是 可 以 继承 的 ， 其 中 相当 一 部 分 都 跟 文本 有 关 ， 比 如 颜色 、 字 体 、 
字号 。 然 而 ， 也 有 很 多 CSS 属性 不 能 继承 ， 因 为 继承 这 些 属性 没有 意义 。 这 些 不 能 
继承 的 属性 主要 涉及 元 素 盒子 的 定位 和 显示 方式 ， 比 如 边框 、 外 边 距 、 内 边 距 ， 这 
些 下 一 章 我 们 才 会 讲 到 。 


























2.9 


29 Ee 


举 个 例子 吧 ， 假 设 我 们 想 创 建 一 个 边栏 ， 在 其 中 放 一 组 链接 。 为 此 ， 我 们 用 nav 元 
素 黄 套 该 组 链接 ， 并 给 nav 应 用 了 一 种 字号 和 一 个 边框 效果 ， 比 如 2 像素 宽 的 红色 
边框 。 不 难 想象 , nav 中 的 所 有 链接 都 继承 它 的 字号 很 正常 , 可 要 是 也 继承 它 的 边框 
就 不 合适 了 。 当 然 ， 这 些 链 接 不 会 继承 边框 效果 ， 因 为 border 属性 不 能 继承 。 








由 于 字体 和 文本 样式 是 可 以 继承 的 ， 所 以 在 使 用 相对 字体 单位 (如 百分比 和 em) 时 
要 格外 小 心 。 如 果 某 个 标签 的 字体 大 小 被 设置 为 80%， 而 它 的 一 个 后 代 的 字体 大 小 
也 被 设置 为 80%， 那么 该 后 代 中 文本 最 终 的 字体 大 小 将 是 64% ( 8096] 80% )。 这 有 
时 候 可 能 并 不 是 你 想 要 的 结果 。 第 4 章 我 们 会 详细 介绍 绝对 和 相对 大 小 的 利 次 。 


本 书后 面 的 例子 还 会 继续 向 大 家 示范 继承 的 作用 ， 展 示 如 何 利 用 继承 以 最 少 的 CSS 
代码 达成 预期 效果 。 


ES 


a, KARERE SCOIAD Ze UE BIUUZ TET. EE. WDELUERXGRIPUES, 
是 一 种 样式 在 文档 层次 中 逐 层 倒 加 的 过 程 ， 目 的 是 让 浏览 器 面 对 某 个 标签 特定 属性 
值 的 多 个 来 源 ， 确 定 最 终 使 用 哪个 值 。 
EU CSS 的 核心 机 制 ， 理 解 了 它 才能 以 最 经 济 的 方式 写 出 最 容易 改动 的 CSS， 让 
文档 外 观 在 达到 设计 要 求 的 同时 ， 也 给 用 户 留 下 一 些 空 间 ， 让 他 们 能 根据 需要 更 改 
文档 的 显示 效果 ( 比如 整体 调整 字号 )。 








2.9.1 样式 来 源 





样式 有 多 处 来 源 。 首 先 ， 如 果 告 诉 你 浏览 器 有 一 个 默认 的 样式 表 ， 你 应 该 不 会 感到 
奇怪 , 因为 你 还 没有 写 一 行 CSS 呢 , 每 个 标签 已 经 带 了 一 定 的 样式 。hd 是 不 是 粗 体 ， 
字号 还 挺 大 ? em 是 不 是 斜体 ?列表 呢 ， 是 不 是 缩 进而 且 还 带 项 目 符号 或 编号 ? 


然后 ， 有 一 个 用 户 样式 表 。 没 错 ， 用 户 也 可 以 提供 样式 表 ， 尽 管 这 样 的 用 户 不 多 见 。 
这 个 选择 对 于 视 障 用 户 很 有 用 ， 他 们 可 以 通过 用 户 样式 表 ， 强 制 浏览 器 加 载 的 所 有 
网 站 都 以 更 大 的 字号 ， 更 容易 分 辨 的 颜色 显示 内 容 。 比 如 ， 某 个 视 障 用 户 可 以 增加 
如 下 样式 : 
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body (font-size:20096;] 
这 样 就 把 字号 调 大 了 一 倍 ， 继 承 同 样 也 会 起 作用 。 


再 有 ， 就 是 作者 样式 表 ， 也 就 是 网 页 设计 师 〈 你 ) 写 的 样式 表 。 前 面 我 们 已 经 讲 了 
作者 给 网 页 添加 样式 的 三 种 方法 : 链接 样式 、 舱 入 样式 和 行内 样式 。 


参见 2.1 节 中 的 “为 文档 添加 样式 的 三 种 方法 ”。 

以 下 就 是 浏览 器 层 壬 各 个 来 源 样式 的 顺序 : 

口 浏览 器 默认 样式 表 

口 用 户 样式 表 

a 作者 链接 样式 表 (按照 它们 链接 到 页 面 的 先后 顺序 ) 

O 作者 能 入 样式 

口 作者 行内 样式 

浏览 器 会 按照 上 述 顺 序 依次 检查 每 个 来 源 的 样式 ， 并 在 有 定义 的 情况 下 ， 更 新 对 每 
个 标签 属性 值 的 设 定 。 整 个 检查 更 新 过 程 结 束 后 ， 再 将 每 个 标签 以 最 终 设 定 的 样式 
显示 出 来 。 


举例 来 说 ， 如 果 作 者 的 链接 样式 表 将 p 的 字体 设 定 为 Helvetica， 而 页 面 中 有 一 条 凯 
入 规则 以 相同 的 选择 符 把 字体 设 定 为 Verdana， 那 么 段落 文本 最 终 会 以 Verdana 字体 
显示 。 因 为 浏览 器 是 在 读 取 链 接 样 式 表 之 后 读 取 般 入 样式 。 但 要 是 用 户 和 作者 样式 
表 都 没有 为 段落 指定 字体 ， 就 会 使 用 浏览 带 默 认 样 式 表 中 指定 的 Times。 


在 接 下 来 了 解 了 层 益 规则 , 知道 了 具体 如 何 确定 给 某 个 页 面 元 素 应 用 何 种 样式 之 后 ， 
你 对 层 县 的 理解 就 会 更 加 透彻 。 

















2.9.2. BZR 


ey 
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以 下 是 层 辣 机 制 的 相关 规则 。 





要 了 解 有 关 层 合 的 更 多 信息 , 请 参考 这 个 链接 : http//www.wa3.org TR/CSS2/cascade.html.. 


EEG: 找到 应 用 给 每 个 元 素 和 属性 的 所 有 声明 。 浏 览 带 在 加 载 每 个 页 面 时 ， 
都 会 据 此 查 到 每 一 条 CSS 规则 ， 标 识 出 所 有 受到 影响 的 HTML 元 素 。 


29 BA 


BARM: 按照 顺序 和 权重 排序 。 浏 览 器 依次 检查 5 个 来 源 ， 并 设 定 匹配 的 属性 。 
如 果 匹 配 的 属性 在 下 一 个 来 源 也 有 定义 ， 则 更 新 该 属性 的 值 ， 如 此 循环 ， 直 到 检查 
完 页 面 中 所 有 标签 受 影 响 属性 的 全 部 5 个 来 源 为 止 。 最 终 某 个 属性 被 设 定 成 什么 值 ， 
就 用 什么 值 来 显示 。 


声明 也 可 以 有 权重 。 可 以 像 下 面 这 样 为 单独 的 声明 增加 权重 : 








p {color:green !important; font-size:12pt;} 
空格 !important 分 号 (; ) 用 于 加 重 声 明 的 权重 。 


这 条 规则 加 重 了 将 文本 设置 为 绿色 的 权重 。 于 是 ， 就 算 层 琶 的 下 一 来 源 给 段落 设 定 
了 其 他 颜色 ， 最 终 的 颜色 值 仍 然 还 是 绿色 。 说 到 底 ， 就 是 一 种 特权 ， 相 当 于 你 下 了 
命令 : 就 应 用 这 个 样式 啦 ， 其 他 来 源 一 概 不 用 考虑 。 不 过 ， 在 使 用 这 个 特权 之 前 ， 
一 定 要 知道 你 的 这 个 !important 声明 ， 很 可 能 会 让 用 户 的 个 人 设 定 不 起 作用 ， 而 用 
户 的 设 定 对 他 可 能 还 非常 重要 。 每 次 当 你 有 使 用 这 个 特权 的 冲动 时 ， 最 好 先 静 下 心 
来 仔细 分 析 一 下 自己 的 CSS， 多 数 情 况 下 都 应 该 可 以 想 出 一 种 更 好 的 替代 方案 。 就 
我 个 人 而 言 ， 我 是 基本 上 不 用 !important 声明 的 。 


层 倒 规则 三 : 按 特 指 度 排序 。 除 了 有 点 拔 口 之 外 ， 特 指 度 〈specificity ) 其 实 表示 一 
条 规则 有 多 明确 。 如 果 没 有 特 指 度 的 考量 ， 那 为 了 让 恰当 的 样式 起 作用 ， 疏 怕 我 们 
就 免不了 要 频繁 变换 样式 表 中 规则 的 顺序 了 。 


我 们 知道 ， 如 果 某 个 样式 表 中 包含 如 下 规则 : 











p (font-size:12px;] 

p.largetext (font-size:16px;] 

那么 下 面 的 段落 

«p class-"largetext"5A bit of text«/p» 

将 显示 16 像素 高 的 文本 ， 因 为 第 二 条 规则 的 选择 符 既 包含 标签 名 ， 也 包含 类 名 ， 所 
以 意义 更 明确 ( 特 指 度 更 高 )， 结 果 第 二 条 规则 会 覆盖 第 一 条 规则 中 的 同名 属性 。 这 
个 例子 似乎 太 明 显 了 ， 如 果 还 是 对 同一 个 段落 ， 有 如 下 样式 呢 ? 








p (font-size:12px;] 
.largetext (font-size:16px;] 
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答案 是 尽管 两 条 规则 都 匹配 同一 个 标签 ， 但 使 用 类 选择 符 的 规则 胜出 ， 文 本 还 是 16 
像素 高 。 为 什么 呀 ? 因为 类 名 选择 符 比 普通 的 标签 选择 符 具 有 更 高 的 特 指 度 。 一 条 
规则 的 特 指 度 ， 由 它 的 选择 符 中 包含 多 少 个 标签 、 类 名 和 ID DOE. 


2.9.3 ”计算 特 指 度 


下 面 我 们 具体 讲 一 讲 怎么 计算 选择 符 的 特 指 度 。 首 先 ， 有 一 个 简单 的 记分 规则 ， 即 
对 每 个 选择 符 都 要 按 下 面 的 “ICE” 公 式 计 算 三 个 值 : 


I-C-E 


ICE 并 非 真 正 的 三 位 数 , 只 不 过 大 多 情况 下 把 结果 看 成 一 个 三 位 数 没 有 问题 , 三 位 数 
最 大 的 胜出 。 但 是 ， 千 万 得 知道 0-1-12 与 0-2-0 相 比 ， 仍 然 是 0-2-0 的 特 指 度 更 高 。 
三 个 字母 间 的 短 横 线 是 分 隔 符 ， 并 非 减 号 。 针 对 这 个 公式 的 计 分 办 法 如 下 : 
选择 符 中 有 一 个 DD， 就 在 I 的 位 置 上 加 1; 

选择 符 中 有 一 个 类 ， 就 在 C 的 位 置 上 加 1; 

. 选择 符 中 有 一 个 元 素 (标签 ) 名 ， 就 在 E 的 位 置 上 加 T; 

. 得 到 一 个 三 位 数 。 





上 c 


好 了 ， 下 面 通过 几 个 例子 来 理解 特 指 度 。 


P 0-0-1 特 指 度 =1 

p.largetext 0-1-1 448 E -11 
pitllargetext 1-0-1 4448/8 -101 
body pitlargetext 1-0-2 特 指 度 =102 
body pillargetext ul.mylist 1-1-3 特 指 度 =113 
body pitllargetext ul.mylist li 1-1-4 特 指 度 =114 


在 此 ， 每 个 选择 符 都 比 前 一 个 选择 符 的 特 指 度 更 高 。 








BARMA: 顺序 决定 权重 。 如 果 两 条 规则 都 影响 某 元 素 的 同一 个 属性 ， 而 且 它 们 
的 特 指 度 也 相同 ， 则 位 置 最 靠 下 《或 后 声明 ) 的 规则 胜出 。” 

















Da 
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E 议 大 家 参考 本 书 一 位 读者 “流年 ”的 文章 “CSS 优先 级 特性 ”: http;//liunian.info/css-specificity.html.; 





29 Ee 


咽 ， 亲 爱 的 读者 ， 层 著 的 概念 确实 不 太 好 理解 。 特 别 是 ， 如 果 你 的 CSS 经 验 还 不 够 
Z, 那 理解 起 来 就 更 不 容易 了 。 不 过 , 我 总 结 了 一 个 简化 版 的 层 铸 规则 C 见 下 面 “ 查 
理 版 简单 层 僵 要 点 ”)， 不 仅 适 用 于 任何 情况 ， 而 且 也 更 容易 记 住 。 


查理 版 简单 层 合 要 点 
在 这 个 查理 版 里 ， 只 要 记 住 三 条 规则 就 够 了 。 这 三 条 规则 适合 所 有 情况 。 


规则 一 : BE ID 的 选择 符 胜 过 包含 类 的 选择 符 ， 包 含 类 的 选择 符 胜 过 包含 标签 名 的 选 
择 符 。 

规则 二 : 如 果 几 个 不 同 来 源 都 为 同一 个 标签 的 同一 个 属性 定义 了 样式 ,行内 样式 胜 过 嵌入 样 
X. 启 入 样式 胜 过 链接 样式 。 在 链接 的 样式 表 中 ， 具 有 相同 特 指 度 的 样式 ， 后 声明 的 胜 过 先 声 
明 的 。 

规则 一 胜 过 规则 二 。 换 多 话说 ， 如 果 选 择 符 更 明确 ( 特 指 度 更 高 ) ， 无 论 它 在 哪里 ， 都 会 
胜出 。 

规则 三 : 设 定 的 样式 胜 过 继承 的 样式 ， 此 时 不 用 考虑 特 指 度 ( 即 显 式 设 定 优先 ) 。 下 面 简单 
解释 一 下 规则 三 。 比 如 下 面 的 标记 


«div id="cascade demo"» 
«p id-"inheritance fact"»Inheritance is «em»weak«/em» in the Cascade«/p» 
«/div» 


和 下 面 的 规则 


divitcascade demo pitinheritance fact (color:blue;] 
2-0-2 (高 特 指 度 ) 


会 导致 单词 “weak” 变 成 蓝 色 ， 因 为 它 从 父 元 素 p 那里 继承 了 这 个 颜色 值 。 

但 是 ， 只 要 我 们 再 给 em 添加 一 条 规则 

em (color:red;) 

0-0-1 ( 低 特 指 度 ) 

em 就 会 变 成 红色 。 因 为 ， 虽 然 它 的 特 指 度 低 (0-0-1) ,但 em 继承 的 颜色 值 ， 会 被 为 它 明 
H (EA) 指定 的 颜色 值 覆 盖 ， 就 算 (AA) 遗传 该 颜色 值 的 规则 的 特 指 度 高 (2-0-2 ) 也 
没有 用 。 
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2.10 ”规则 声明 


前 面 ， 我 们 主要 介绍 了 怎么 使 用 CSS 规则 的 选择 符 选 择 标签 ,但 对 CSS 规则 的 另 一 
部 分 一 一 声明 ， 还 一 点 都 没有 讨论 过 呢 。 为 了 介绍 选择 符 ， 前 面 那些 例子 中 曾 使 用 
过 很 多 种 声明 , 但 始终 都 没有 机 会 解释 它们 。 好 了 ， 现 在 是 时 候 了 ， 本 节 专 门 讨论 规则 
声明 。 


本 章 开头 的 图 2-2 展示 了 CSS 规则 的 构成 。 我 们 也 知道 一 个 声明 包含 两 部 分 : 属性 
和 值 。 属 性 指出 要 影响 元 素 的 哪个 方面 (颜色 、 高 度 ， 等 等 )， 而 值 表示 把 属性 设 定 
为 什么 (绿色 、12px， 等 等 )。 


每 个 元 素 都 有 很 多 属性 ， 可 以 通过 CSS 来 设 定 。 但 每 个 元 素 具体 有 哪些 属性 ， 也 会 
因 元 素 而 异 。 比 如 ， 可 以 给 文本 元 素 设 定 font-size 属性 ， 但 图 片 则 没有 这 个 属性 。 
后 续 几 章 会 陆续 讲 到 各 种 HTML 元 素 的 属性 ,但 CSS 属性 的 值 则 只 有 少数 几 种 ， 所 
以 我 们 现在 就 可 以 学 习 。 











CSS 属性 值 主要 分 以 下 三 类 。 





文本 值 。 例如 , font-weight:bold 声明 中 的 bold 就 一 个 文本 值 ,文本 值 也 叫做 关键 字 。 
数字 值 。 数 字 值 后 面 都 有 一 个 单位 ， 例 如 英寸 或 点 。 在 声明 font-size:12px 中 ，12 
是 数字 值 ， 而 px 是 单位 〈 像 素 )。 如 果 数 字 值 为 0o， 那 么 就 不 用 带 单 位 了 。 


颜色 值 。 颜色 值 可 以 用 几 种 不 同 的 格式 来 写 , 包括 RGB ( Red, Green, Blue, 红 绿 蓝 )、 
HSL ( Hue, Saturation, Luminance ， 色 相 ， 饱 和 度 ， 亮 度 ) 和 十 六 进 制 值 (例如 
color:#336699 )。 











下 面 我 们 依次 介绍 一 下 这 三 种 值 。 


2.10.1 文本 值 


- 56 - 


所 有 CSS 属性 都 有 文本 值 。 例 如 ，visibility 属性 有 visible 和 hidden fi, 
border-style 属性 有 solid, dashed 以 及 inset 值 。 





除了 上 面 两 个 属性 外 ,还 有 很 多 属性 可 以 使 用 文本 值 , 但 那些 值 都 是 特定 于 属性 的 。 
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所 以 ， 我 会 在 后 面 几 章 中 用 到 相应 的 属性 时 ， 再 跟 大 家 介绍 它们 的 文本 值 。 与 文本 
值 不 同 ， 数 字 值 和 颜色 值 的 书写 方式 是 有 限 的 。 


2.10.2 ”数字 值 


数字 值 用 于 描述 元 素 的 各 种 长 度 (在 CSS 里 ,“ 长 度 ” 的 含义 比较 广 ， 还 包括 高 度 、 
宽度 、 粗 细 ， 等 等 ) 数字 值 主要 分 两 类 绝对 值 和 相对 值 。 


K 2-1 列 出 了 绝对 值 。 绝 对 值 描述 的 是 一 个 真实 的 长 度 〈 比 如 ，6 英寸 )， 而 相对 值 
则 是 相对 于 其 他 基准 的 描述 〈 比如 “是 某 某 的 两 倍 长 ”)。 


表 2-1 绝对 值 及 示例 





绝 对 dà 单位 缩写 FO B 
英寸 in height:6in 
厘米 cm height:40cm 
毫米 mm height:500mm 
点 pt height:60pt 
皮卡 pc height:90pc 
像素 px height:72px 


* 示例 值 并 不 是 相等 的 长 度 。 


对 于 绝对 单位 ， 本 书 的 例子 中 只 使 用 像素 ， 我 在 工作 也 是 一 样 。 但 打印 样式 表 是 个 
例外 ， 因 为 打印 纸 是 以 英寸 为 单位 度量 的 。 以 相同 的 单位 设计 打印 布局 是 最 合适 的 。 


虽然 绝对 单位 的 含义 不 需要 什么 解释 ,但 表 2-2 中 列 出 的 相对 单位 则 需要 多 花 点 笔墨 











才能 讲 清楚 。 
表 2-2 相对 值 及 示例 
相 对 值 单位 缩写 m 例 ” 
Em em height:1.2em 
Ex ex height:6ex 
百分比 % height:120* 


* 示例 值 并 不 是 相等 的 长 度 。 
em 和 ex 都 是 字体 大 小 的 单位 ， 但 在 CSS 中 ， 它 们 作为 长 度 单位 适用 于 任何 元 素 。 


先 说 说 em , 它 表 示 一 种 字体 中 字母 M 的 宽度 , 因此 它 的 具体 大 小 取决 于 你 使 用 的 字 
体 。 而 ex 呢 ， 等 于 给 定 字体 中 字母 x 的 高 度 (小 写字 母 x 代表 一 种 字体 的 字母 中 间 
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部 分 的 高 度 ， 不 包括 字母 上 、 下 突出 的 部 分 一 一 如 d 和 p 上 下 都 出 头 儿 )。 

百分比 非常 适合 设 定 被 包含 元 素 的 宽度 , 此 时 的 百分比 就 是 相对 于 宽度 而 言 的 。 第 5 
章 会 讲 到 , 把 HTML 结构 元 素 的 宽度 设 定 为 body 宽度 的 百分比 , 是 “ 流 式 ”设计 的 
关键 所 在 。 这 种 布局 设计 可 以 随 着 用 户 调整 浏览 噩 窗口 大 小 而 成 比例 地 伸缩 。 





2.10.3 ”颜色 值 
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指定 颜色 值 可 以 有 几 种 方式 。 这 些 方式 可 以 在 同一 个 样式 表 中 混合 使 用 。 
1. 颜色 名 A red) 


就 像 前 面 讨论 选择 符 的 例子 一 样 ， 设 定 颜色 属性 时 可 以 直接 使 用 颜色 名 ， 或 者 用 官 
方术 语 就 是 颜色 关键 字 。 

W3C 定 义 了 16 个 颜色 关键 字 : aqua ( 浅 绿色 )、black ( 黑色 ), blue ( 蓝 色 )、fuchsia 
(紫红 色 )、gray (灰色 )、green (绿色 )、lime ( 黄 绿色 )、 maroon ( 褐 红色 )、navy 
( 深蓝 色 )、olive ( 茶 青 色 )、purple ( 紫色 ), red ( 红色 ), silver ( 银色 ), teal (青色 )、 
white ( 白色) 和 yellow 黄色 )。 要 了 解 这 些 颜色 名 及 其 对 应 的 RGB 颜色 值 ， 请 参 
Jb. http://www.w3.org/TR/css3-color/#html4。 


大 多 数 现 代 浏 览 器 支持 更 多 种 颜色 名 ( 即 140 X11 颜色 名 ), 但 如 果真 要 使 用 颜色 名 ， 
最 好 只 使 用 前 面 那 16 种 。 要 了 解 这 114 种 颜色 名 及 其 对 应 的 RGB 颜色 值 ， 请 参考 : 
http://en.wikipedia.org/wiki/X11 color names。 

















一 般 来 说 ， 颜 色 关 键 字 最 常用 于 指定 白色 和 黑色 。 对 于 其 他 颜色 真 的 很 较真 儿 的 场 
合 ， 还 得 使 用 以 下 几 种 格式 的 颜色 值 。 


2. 十 六 进 制 颜色 〈#RRGGBB 或 #RGB ) 





如 果 你 了 解 C++, PHP 或 JavaScript, 那么 对 用 十 六 进 制 值 表示 颜色 应 该 会 比较 熟悉 。 
十 六 进 制 颜色 的 值 的 格式 如 下 : 





#rrggbb 
例如 橙色 是 : 


#ff8800 
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和 干 万 别 筷 了 值 开头 的 # ( 井 号 )! 





这 个 6 位 数 的 前 两 位 定义 红色 ， 中 间 两 位 定义 绿色 ， 后 两 位 定义 蓝 色 。 计 算 机 使 用 
二 进 制 计数 ， 而 不 是 我 们 稼 用 的 十 进 制 ， 因 此 才 有 了 十 六 进 制 (16 是 2 的 4 次 寡 )。 
十 六 进 制 以 16 为 基数 ， 使 用 数字 0-9 和 字母 a-f， 共 16 个 值 。 其 中 ，a-f 代 表 10 到 
15。 由 于 每 种 颜色 用 两 位 十 六 进 制 值 表示 ， 因 此 该 颜色 就 有 256 ( 16 x 16 ) 种 可 能 的 
值 ， 结果 就 是 16777216 (256x256x256) 种 组 合 ， 也 就 是 可 以 表示 那么 多 种 颜色 。 


























纯 红 色 是 #ffoo000， 纯 绿色 是 #ooffo0， 而 纯 蓝 色 是 #oo00ff。 





大 多 数 十 六 进 制 颜色 值 不 仔细 分 析 可 不 容易 猜 ， 比 如 #7ca9be 是 深蓝 绿色 ， 我 怎么 知 
道 的 ? 首先 我 们 来 看 每 一 对 rgb 值 中 的 第 一 个 值 ， 也 就 是 7、a、b。 蓝 色 和 绿色 值 相 
差 无 几 ， 而 红色 值 也 没有 那么 深 。 有 了 这 些 信 息 ， 就 可 以 大 致 猜 出 这 个 颜色 了 ， 对 ， 
是 蓝 绿色 。 


另外 ， 如 果 三 对 值 中 的 每 一 对 是 两 个 相同 的 数字 ， 也 可 以 使 用 简写 形式 : 
itrgb 
如 今 已 经 废弃 的 216 种 Web 安全 色 ， 完 全 是 由 这 种 两 两 相同 的 颜色 值 构成 的 。 


对 于 上 面 的 例子 来 说 ， 可 以 分 别 将 它们 写成 #fo0、#0fo 和 #oof。 再 比如 ，#ff3322 CT 
红色 ) 可 以 简写 成 村 32。 在 设 定 阴 影 的 时 候 ， 这 种 简写 方式 可 以 省 不 少 劲 儿 。 比 如 ， 
#000 是 纯 黑 ，#444 是 75% 灰 色 ，#888 是 50% 灰 色 ，#bbb 是 25% 灰 色 ， 而 村 ff 则 是 纯 
白色 。 





3. RGB 颜色 值 (R, G, B) 

每 种 颜色 都 可 以 用 一 个 0 到 255 (包含 ) 之 间 的 值 指定 。 格 式 如 下 : 

rgb(r, g, b) 

比如 ，zgb(0,255,0) 表 示 纯 绿色 。 

没 错 ， 与 十 六 进 制 RGB 值 一 样 ， 只 不 过 使 用 的 是 十 进 制 的 数值 。 因 为 每 种 颜色 都 有 
256 种 可 能 ,所 以 它 能 表示 的 颜色 数量 与 十 六 进 制 格式 的 一 样 。 不 同 的 是 ,我 们 对 十 


进 制 数 更 熟悉 ， 毕 竟 是 童子 功 咏 。 而 十 六 进 制 是 计算 机 课 上 才学 的 〈 你 在 学 校 里 学 
过 计算 机 ， 对 吧 ? )。 
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4. RGB 百分比 值 CR%, G96, B96) 
这 是 用 百分比 来 表示 每 种 颜色 值 的 一 种 方法 ， 格 式 如 下 : 
r%, g%, b% 


可 以 接受 的 值 是 0% 到 100%。 虽 然 以 这 种 方法 只 能 表示 区 区 一 百 万 (100 x 100 x 
100) 种 颜色 ， 但 对 我 们 绝 大 数 人 来 说 ， 也 已 经 足够 了 。 同 样 ， 使 用 百分比 表示 的 颜 
色 值 ， 比 使 用 十 六 进 制 更 容易 猜 到 你 想 要 的 颜色 。 








举 个 例子 ，100%，0%，0% 是 纯 红 色 ，0%，100%，0% 是 纯 绿色 ， 而 46%，76%，80% 接 近 
前 面 用 十 六 进 制 值 作 例子 分 析 的 深蓝 绿色 。 


5. HSL (色相 , 饱和 度 %, 亮度 %) 

HSL 格式 如 下 : 

HSL(0,0%, 0%) 

HSL 比 我 们 见 过 的 各 种 RGB 方式 更 直观 ， 因 为 使 用 它 更 容易 写 出 和 看 懂 颜 色 。 


HSL 颜色 中 的 第 一 个 值 表 示 色 相 ， 也 就 是 一 个 实际 的 颜色 ， 比 如 红色 和 绿色 。 所 有 
颜色 围绕 色相 环 ( 也 叫 色 轮 ) 一 周 ， 而 色相 值 以 圆周 上 的 度数 表示 。 


如 图 2-20 所 示 ，HSL 中 的 色相 值 以 色 轮 上 的 度数 表示 请 参见 本 书 封 皮 的 前 勒 口 的 
彩 图 )。 


0°/360° 





Bg 2-20 HSL 颜色 模型 中 的 色相 值 以 圆周 上 的 度数 表示 
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红色 是 0 或 360， 青 色 是 与 之 相对 的 180。 以 下 是 彩虹 七 色 在 色 轮 中 大 致 的 色相 值 。 


口红 : 0 

af: 35 
"E 60 
口 绿 : 125 
口 蓝 : 230 
a ë: 280 
a X: 305 





至 于 饱和 度 和 亮度 ， 相 对 就 容易 理解 多 了 。 饱 和 度 设 定 有 多 少 颜 色 ， 灰 色 的 饱和 度 
低 ， 而 强烈 的 色彩 饱和 度 高 。 亮 度 设 定 颜色 的 明暗 ，0% 就 是 黑色 ，100% 就 是 白色 ， 
而 中 间 的 值 是 实际 能 看 到 的 色相 。 


如 果 把 上 面 七 彩虹 的 色相 值 都 记 住 ， 或 者 就 放 在 手边 ， 那 么 你 会 发 现 想 写 出 什么 颜 
色 都 不 在 话 下 。RGB 和 十 六 进 制 颜色 值 , 都 要 求 你 事先 在 大 脑 里 先 混合 颜色 , 而 HSL 
则 只 有 一 个 表示 颜色 的 值 。 从 把 饱和 度 和 亮度 都 设 定 为 50%， 就 可 以 轻松 调制 出 你 
想 要 的 任何 颜色 来 。 


6. Alpha 通道 


请 注意 ，RGB 和 HSL 都 支持 Alpha 通道 ， 用 于 设置 颜色 的 不 透明 度 ( 换 句 话说 ， 就 
是 能 够 透 过 多 少 背 景 )。 相 应 的 格式 分 别 叫 RGBA 和 HSLA。 其 中 ， 两 种 格式 中 的 A 
(alpha ) 值 可 以 是 1 (完全 不 透明 ) 也 可 以 是 0 ( 完全 透明 ), 或 者 介 于 1 和 0 之 间 的 
小 数值 。 关 于 Alpha 通道 的 详细 内 容 ， 我 们 会 在 下 一 章 再 讲 。 


天 于 颜色 的 一 些 资料 





O http://colrd.com: Colrd 是 一 个 Pinterest 风格 的 站 点 ， 其 中 有 很 多 能 启发 人 创造 力 的 图 片 和 
照片 ， 以 及 相应 的 调 色 板 。 





O http://kuler.com: Adobe Kuler 的 官方 站 点 提供 了 数 千 种 色 样 、 调 色 板 创建 工具 ， 以 及 其 他 
人 正在 选用 的 时 尚 颜色 。 
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2.11 小 结 
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本 章 ， 我 们 学 习 了 CSS 规则 ， 以 及 如 何 用 它 来 为 HTML 元 素 应 用 样式 。 我 们 先是 把 
各 种 CSS 选择 符 都 讲 了 一 遍 ， 灵 活 运用 这 些 选 择 符 ， 可 以 在 HTML 标记 中 选择 目标 
元 素 。 接 着 介绍 了 规则 声明 到 底 怎么 把 样式 应 用 给 元 素 的 属性 。 在 此 ， 我 们 讨论 了 
层 倒 、 继 承 和 特 指 的 概念 ， 知 道 了 当 多 个 样式 共同 影响 一 个 属性 时 ， 哪 个 样式 最 后 
会 胜出 。 最 后 ， 我 们 又 详细 罗列 了 在 规则 声明 中 指定 属性 值 的 各 种 方法 ， 包 括 数 值 
和 关键 字 ， 以 及 可 用 来 设 定 颜 色 的 几 种 方法 。 








下 一 章 ， 我 们 要 看 一 看 怎么 设计 页 面 文本 的 结构 ， 并 给 它们 应 用 样式 ， 才 能 得 到 令 
人 惊叹 的 专业 布局 。 


3.1 


本 章 ， 我 们 该 学 习 盒 模型 了 。 当 然 ， 还 有 position 和 display 属性 ， 以 及 如 何 浮动 
(float) 和 清除 (clear) 元 素 。 这 么 说 吧 ， 要 掌握 CSS 技术 ， 核 心 就 是 要 掌握 元 素 定 
位 ， 只 有 这 样 才能 用 CSS 创造 出 专业 水 准 的 页 面 布局 。 














所 谓 盒 模型 ， 就 是 浏览 器 为 页 面 中 的 每 个 HTML 元 素 生 成 的 矩形 盒子 。 这 些 盒子 
们 都 要 按照 可 见 版 式 模型 ( visual formatting model ) 在 页 面 上 排 布 。 可 见 的 页 面 
版 式 主要 由 三 个 属性 控制 : position 属性 、display 属性 和 float 属性 。 其 中 ， 
position 属性 控制 页 面 上 元 素 间 的 位 置 关 系 ，display 属性 控制 元 素 是 堆 琶 、 并 
HE. 还 是 根本 不 在 页 面 上 出 现 , float 属性 提供 控制 的 方式 ,以便 把 元 素 组 成 成 多 
栏 布局 。 

































































理解 盒 模型 


早 在 第 1 章 我 们 就 讲 过 了 ， 每 一 个 元 素 都 会 在 页 面 上 生成 一 个 盒子 。 因 此 ，HTML 
页 面 实际 上 就 是 由 一 堆 盒 子 组 成 的 。 











默认 情况 下 ， 每 个 盒子 的 边框 不 可 见 ， 背 景 也 是 透明 的 ， 所 以 我 们 不 能 直接 看 到 页 
面 中 盒子 的 结构 。 同 样 ， 我 们 也 介绍 过 ， 使 用 Web Developer 工具 条 ， 可 以 方便 地 显 
示 出 盒子 的 边框 和 背景 ， 从 而 让 我 们 能 从 另外 一 个 角度 来 审视 页 面 的 构成 。 








第 3 章 ”定位 元 素 





好 啦 ， 我 们 先 从 每 个 元 素 盒子 的 属性 开始 吧 。 这 些 属 性 可 以 分 成 三 组 。 





O 34E (border) 。 可 以 设置 边框 的 宽窄 、 样 式 和 颜色 。 
O 内 边 距 (padding) 。 可 以 设置 盒子 内 容 区 与 边框 的 间 踊 。 
O 外 边 距 ( margin ) 。 可 以 设置 盒子 与 相 邻 元 素 的 间距 。 








^ 
SED 要 了 解 有 关 爹 模型 的 更 多 信息 ,请 参考 这 里 :http:/wwww3.org/TR/REC-CSS2/box.html。 


怎么 理解 这 几 组 属性 呢 ? 最 简单 方法 是 想象 一 下 外 边 距 是 边框 向 外 推 其 他 元 素 ， 而 
内 边 距 是 从 边框 向 内 推 元 素 的 内 容 ， 参 见 图 3-1。 一 个 盒子 有 4 条 边 ， 因 此 与 边框 、 
内 边 中 和 外 边 距 相 关 的 属性 也 各 有 4 个 , 分 别 是 上 (top), A (right), F (bottom )、 
左 (left); 


这 里 是 内 容 。 在 没有 设 
E 的 情 } 






































度 由 元 素 宽度 决定 。 
如 果 没 有 给 元 素 设 定 宽 
度 ， 设 定 内 边 距 可 控制 








| N E E N EA 


图 3-1 这 个 盒 模型 示意 图 展示 了 HIM 元 素 的 边框 、 内 边 距 和 外 边 距 之 间 的 关系 


> 元 素 盒子 还 有 一 个 背景 层 ， 可 以 改变 颜色 ， 也 可 以 添加 图 片 。 与 元 素 背 景 相关 的 属 
Q 性 将 在 本 章 后 面 介 绍 。 


虽然 可 以 用 总 共 12 个 属性 分 别 为 4 条 边 的 边框 、 外 边 距 和 内 边 距 指定 宽度 , 但 CSS 
也 为 我 们 提供 了 简写 属性 。 详 细 信 息 请 参考 附注 “简写 样式 ”。 
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简写 样式 


CSS 为 边框 、 内 边 距 和 外 边 距 分 别 规 定 了 简写 属性 ， 让 你 通过 一 条 声明 就 可 以 完成 设 定 。 在 每 
个 简写 声明 中 ,属性 值 的 顺序 都 是 上 、 右 、 下 、 左 。 想 象 一 下 顺 时 针 旋 转 就 记 住 了 。 举 个 例子 
吧 ， 如 果 要 设 定 盒子 的 外 边 距 ， 不 用 简写 属性 就 得 这 样 写 : 


{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;} 
使 用 简写 属性 ， 则 可 以 简写 为 这 样 : 
{margin:5px 10px 12px 8px;} 


注意 ，4 个 值 之 间 有 空格 ,但 不 能 是 其 他 分 隔 符 ( 比如 逗号 之 类 的 ) 。 甚 至 ， 你 都 不 用 把 4 值 
全 都 写 出 来 一 一 如 果 哪 个 值 没有 写 ， 那 就 使 用 对 边 的 值 。 


{margin:12px 10px 6px;} 


对 这 个 例子 来 说 , 由 于 没有 写 最 后 一 个 值 (左边 的 值 ), 所 以 左边 就 会 使 用 右边 的 值 , 即 10px。 
而 在 下 面 的 例子 中 : 


{margin:12px 10px;} 


只 写 了 两 个 值 ， 上 和 右 ， 因 此 缺少 的 下 和 左 就 会 被 设 定 为 12px 和 10px。 最 后 ， 如 果 你 只 写 
一 个 值 : 


{margin:12px;} 


那么 4 个 边 都 取 这 个 值 。 使 用 这 种 简写 属性 ， 不 能 绕 开 上 和 右 ， 只 给 下 和 左 设 定 值 ， 即 使 上 和 
右 都 是 零 也 不 行 。 绕 个 开 人 怎么 办 ?如果 它 们 真是 零 的 话 ， 那 就 写 0 呐 ， 比 如 : 


{margin:0 0 2px 4px;} 


另外 , 每 个 盒子 的 属性 也 分 三 种 粒度 ， 到 | 底 选 择 哪个 粒度 的 属性 ， 要 看 你 想 选择 哪 条 边 ， 以 及 
那 条 边 的 哪个 属性 。 这 三 种 粒度 从 一 般 到 特殊 分 别 是 举例 如 下 。 


1. 全 部 3 个 属性 ， 全 部 4 条 边 
{border:2px dashed red;} 


2.1 个 属性 ， 全 部 4 条 边 
{border-style:dashed;} 


3.1 个 属性 ，1 条 边 
{border-left-style:dashed;} 
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混合 使 用 这 三 种 粒度 的 简写 属性 达成 设计 目标 是 很 常见 的 。 比 如 说 吧 ， 我 想 为 盒子 的 上 边 
和 下 边 添 加 4 像素 宽 的 红色 边框 ， 为 左边 添加 1 像素 宽 的 红色 边框 ， 而 右边 没有 边框 。 可 
以 这 样 写 : 

{border:4px solid red;) /* 先 给 4 条 边 设置 相同 的 样式 */ 


{border-left-width:1px;} /* 修改 左边 框 宽度 */ 
{border-right:none;} /* 移 除 右边 框 */ 


类 似 地 ， 其 他 属性 也 都 有 这 三 级 粒度 ， 例 如 padding 和 border-radius 等 。 


3.1.1 合子 边框 
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边框 (border ) 有 3 个 相关 属性 。 





F 


Q 宽度 (border-width) 。 可 以 使 用 thin, medium 和 thick 等 文本 值 ， 也 可 以 使 用 
除 百分比 和 负 值 之 外 的 任何 绝对 值 。 

口 样式 (border-style )。 有 none、 hidden, dotted, dashed, solid, double, groove, 
ridge、inset 和 outset 等 文本 值 。 

口 颜色 (border-color) 。 可 以 使 用 任意 颜色 值 ， 包括 RGB、HSL、 十 六 进 制 颜色 
值 和 颜色 关键 字 。 








CSS 推荐 标准 并 未 明确 规定 border-width 这 几 个 文本 值 thin, medium 和 thick 的 确 

切 宽度 ， 实 际 显示 的 宽度 可 能 会 因 浏览 器 而 异 。 对 于 边框 样式 (border-style )， 除 

了 solid 值 ( 实 线 ) 之 外 ，CSS 规范 也 没有 明确 规定 。 因 此 dashed 值 (虚线 ) 在 不 
同 浏览 器 中 的 短 划 线 长 度 和 线 间距 也 可 能 会 不 一 样 。 


border 的 第 四 个 属性 border-radius 并 不 影响 盒 模型 的 定位 ,所 以 我 们 放 在 第 7 章 再 
介绍 


2] -Do 





前 面 附 注 栏 “简写 样式 ”里 已 经 展示 了 儿 个 边框 相关 的 样式 了 ,但 下 面 我 们 要 举 几 
个 稍微 复杂 点 的 例子 ， 以 进一步 巩固 你 的 理解 。 


p.warning (border:solid #F33;} 


有 了 这 条 规则 , 任何 带 有 warning 类 的 段落 都 会 带 上 一 个 吸引 眼球 的 、4 像素 宽 的 红 
色 实 心 边 框 ， 如 图 3-2 所 示 。 
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eoo Box Border 


rir e Ja: ) 
Important Warning! 








3-2 ”在 这 里 ,我 希望 4 条 边 样 式 相 同 ， 因 此 就 使 用 了 border 简写 属性 


假如 我 为 了 让 边框 看 起 来 更 有 意思 ， 想 在 4 条 边 都 是 红色 实心 边框 的 基础 上 ， 把 右 
边框 和 下 边框 变 窗 一 些 ， 那 么 可 以 在 前 面 规则 基础 上 新 写 一 条 规则 。 前 面 那 条 规则 
使 用 了 “所 有 4 边 一 次 性 ” 设 定 的 便捷 属性 border, X 4 条 边 设 定 了 基础 。 下 面 这 
条 新 规则 可 以 使 用 border-width 修改 个 别 边框 的 宽度 : 








p.warning (border:solid #f33;} 
p.warning (border-width:4px 1px 1px 4px;) 


结果 如 图 3-3 所 示 。 


eoo Box Border 


e e Ka ) 
[Important Warning! 











3-3 fFBborder-width 属性 ， 可 以 为 盒子 的 每 条 边 单独 设 定 宽度 


在 实际 开发 的 时 候 ， 为 了 看 清楚 margin 和 padding 的 实际 效果 ， 可 以 临时 设 定 盒子 
的 边框 。 默 认 情 况 下 ， 边 框 的 三 个 相关 属性 的 值 分 别 为 border-width:medium; 、 
border-style:none;, border-color:black;. 由 于 border-style 的 默认 值 是 none, 
所 以 不 会 显示 盒子 的 边框 。 为 了 快速 地 把 盒子 边框 显示 出 来 ,可 以 这 样 写 一 条 规则 : 





p {border:solid 1px;] 
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这 样 就 把 border-style KENKA (solid), 于 是 边框 就 出 现 了 。 当然 , 这 里 也 把 边框 





宽度 由 默认 的 3 RREFEN 1 像素 ， 从 而 把 边框 对 布局 宽度 和 高 度 的 影响 降 到 最 低 。 


3.1.2 ”盒子 内 边 距 





内 边 距 是 盒子 内 容 区 与 盒子 边框 之 间 的 距离 。 图 3-4 展示 了 一 个 带 边 框 的 元 素 的 内 容 


区 ， 应 用 给 该 元 素 的 规则 如 下 。 


p (font:16px helvetica, arial, sans-serif; width:220px; border:2px solid red; 


background-color:fcaebff;] 


eoo Box Padding 


hale) Gt e fa ) 


Here is a short paragraph of 
ext. Without any padding, the 
ext can touch the border on all 
our sides, which gives the 





layout a very crowded 
appearance. It's not something 
you really want to read. 





图 3-4 ”在 没有 设 定 内 边 距 的 情况 下 ， 内 容 紧 挨 着 边框 


如 果 你 什么 也 不 做 ， 那 么 元 素 的 文本 就 会 像 这 样 紧 挨 着 元 素 的 边框 ， 这 看 着 可 让 人 
有 点 不 舒服 。 其实 , 只 要 给 元 素 添 加 一 点 内 边 距 , 情况 就 会 大 为 改观 , 如 图 3-5 所 示 ， 


规则 如 下 。 


eoo Box Padding 


EI ey e fa ) 





Here is another short 
paragraph of text. With 


padding added, the text does 
not touch the border and the 
visual appearance is much 
improved. 





图 3-5 只 要 显示 元 素 边框 ， 为 防止 文本 挨 上 它 就 得 添加 内 边 距 
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p (font:16px helvetica, arial, sans-serif; width:220px;border:2px solid red; 
background-color:icaebff; padding:10px;) 

由 于 内 边 距 在 盒子 的 内 部 ， 所 以 它 也 会 取得 盒子 的 背景 。 仔 细 比 较 一 下 图 3-4 和 图 

3-5 就 会 发 现 ， 内 边 中 实际 加 在 了 声明 的 盒子 宽度 之 上 。 换 名 话说， 多 出 来 的 内 边 距 

并 没有 像 我 们 想象 的 那样 挤 压 文本 内 容 ， 这 是 怎么 回 事 儿 了 呢 ? 请 容 我 先 在 这 里 卖 

个 关于， 本 章 后 面 再 给 大 家 解释 。 


3.1.3 ”盒子 外 边 距 


与 边框 和 内 边 距 相 比 ， 盒 子 的 外 边 距 要 复杂 一 些 。 在 图 3-6 中 ， 有 三 组 标题 和 段落 。 
第 一 组 标题 和 两 个 段落 使 用 默认 样式 。 第 二 组 与 第 一 组 唯一 的 区 别 就 是 多 了 边框 ， 
但 因此 也 可 以 看 清 标题 与 段落 间 的 外 边 距 有 多 大 。 第 三 组 展示 了 把 外 边 距 设置 为 零 
之 后 的 效果 ， 该 组 的 标题 和 段落 全 都 紧 挨 在 一 起 了 。 


eoo Box Margin 
Lale] e | fa- 】 

















Margin Demo 
No styles are applied to either of these paragraphs. 


However, there is clearly space between them. 





Margin Demo with borders turned on | 


his is the same arrangement of a heading and two paragraphs but now the borders are visible, and 
ou can see how the default margins create space between the elements. 


Margins push an element away from elements it would otherwise touch. 














Margin Demo — borders on, but without margins 


Be aware that almost every element has margins by default, and you will often want to eliminate or 
adjust the default margin settings to get thi 0 





3-6 ”学 会 控制 元 素 周围 的 外 边 距 是 布局 的 重要 技能 


中 和 外 边 距 和 内 边 距 
推荐 大 家 把 下 面 这 条 规则 作为 样式 表 的 第 一 条 规则 : 
* (margin:0; padding:0;] 


这 条 规则 把 所 有 元 素 默认 的 外 边 距 和 内 边 距 都 设 定 为 零 。 把 这 条 规则 放 到 样式 表 里 后 , MAA 
认 的 外 边 距 和 内 边 距 都 会 消失 。 然 后 ， 你 可 以 为 那些 真正 需要 外 边 距 的 元 素 再 添加 外 边 距 。 稍 
后 我 们 会 介绍 , 不 同 浏览 器 默认 的 内 边 距 和 外 边 距 也 不 一 样 , 特别 是 对 表单 和 列表 等 复合 元 素 。 
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在 这 种 情况 下 ， 用 前 面 那 条 规则 “中 和 ”默认 值 ， 然 后 再 根据 需要 添加 ， 则 会 在 各 浏览 器 上 获 
得 一 致 的 效果 。 


我 在 自己 的 项 目 中 使 用 了 Eric Meyer 写 的 重 置 样式 表 reset.css。 这 个 样式 表 不 仅 重 置 了 外 
边 距 和 内 边 距 ， 还 对 很 多 元 素 在 跨 浏览 器 显示 时 的 外 观 进行 了 标准 化 。 至 于 Eric 为 什么 要 
写 一 个 涉及 面 如 此 之 广 的 重 置 样式 表 ， 可 以 参考 他 的 文章 htip://meyerweb.com/eric/ 
thoughts/2007/04/18/reset-reasoning, reset.css 的 下 载 地 址 是 http://meyerweb. com/ 
eric/tools/css/reset。 


3.1.4 Eni 
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EEDA EBS A NZLEB SÉRIE, ix n] ERARE PES SATIS SOEAEEE- PF 
么 叫 外 边 距 到 加， 为 什么 它 那么 重要 。 假 设 有 3 个 段落 ， 前 后 相 接 ， 而 且 都 应 用 以 
下 规则 : 





/# 为 简明 起 见 ， 省 略 了 字体 声明 *#/ 
p (height:50px; border:1px solid #000; backgroundcolor:#fff; margin-top:50px; 
margin-bottom:30px; } 

由 于 第 一 段 的 下 外 边 中 与 第 二 段 的 上 外 边 距 相 邻 ， 你 自然 会 认为 它们 之 间 的 外 边 距 
是 80 像素 (50+30 ), 但 是 你 错 啦 ! 它们 实际 的 间距 是 50 像素 。 像 这 样 上 下 外 边 距 
相遇 时 ， 它 们 就 会 相互 重合 ， 直 至 一 个 外 边 距 碰 到 另 一 个 元 素 的 边框 。 就 上 面 的 例 
子 而 言 ， 第 二 段 较 宽 的 上 外 边 距 会 磁 到 第 一 段 的 边框 。 也 就 是 说 ， 较 宽 的 外 边 距 决 
定 两 个 元 素 最 终 离 多 远 , 没 错 一 一 50 像素 (参见 图 3-7 )。 这 个 过 程 就 叫 外 边 距 铸 加 。 




















eoo Collapsing Margins 
aje] ht ea 




















Here Ive made the paragraphs 50 pixels high and turned their borders on so you can see what 50 pixels looks like. 








[The top margin of each paragraph is 50 pixels and the bottom margin is 30 pixels, so you might expect 80 pixels of space 
between them. 








hs you can see, the margin is equal to the paragraph height —50 pixels; the margins have collapsed and only the larger of the| 
wo touching margins has effect. 
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注意 啦 ， 滞 加 的 只 是 垂直 外 边 距 ， 水 平 外 边 距 不 登 如 。 对 于 水 平 相 邻 的 元 素 ， 它 们 
的 水 平 间 距 是 相 邻 外 边 距 之 和 。 这 跟 你 最 初 想 的 一 样 。 


好 吧 ， 我 想必 须 得 解释 一 下 为 什么 要 让 外 边 距 到 加 。 如 果 有 一 连 串 段落 都 被 应 用 了 
相同 的 样式 ， 那 么 对 其 中 第 一 段 和 最 后 一 段 来 说 ， 它 们 的 上 外 边 距 和 下 外 边 距 决定 
了 它们 与 包含 元 素 的 间距 。 而 那些 位 于 中 间 的 段落 呢 ， 根 本 不 需要 两 个 外 边 距 加 起 
来 那么 宽 的 间距 。 因此 , 就 像 图 3-7 所 示 的 那样 , 相 邻 的 外 边 距 至 加 起 来 是 最 合理 的 ， 
哪个 外 边 距 宫 ， 就 以 哪个 外 边 距 作为 段 间距 。 


3.1.5 ”外 边 距 的 单位 


3.2 


根据 经 验 ， 为 文本 元 素 设置 外 边 距 时 通常 需要 混合 使 用 不 同 的 单位 。 比 如 说 ,一 个 
段落 的 左 、 右 外 边 距 可 以 使 用 像素 ， 以 便 该 段 文本 始终 与 包含 元 素 边 界 保 持 固 定 间 
WB, 不 受 字 号 变 大 或 变 小 的 影响 。 而 对 于 上 、 下 外 边 距 ， 以 em 为 单位 则 可 以 让 段 间 
距 随 字号 变化 而 相应 增 大 或 缩小 ， 比 如 : 

/* 这 里 使 用 了 简写 属性 把 上 、 下 外 边 距 设置 为 .75em， 把 左 、 右 外 边 距 设置 为 30 像素 */ 
p {font-size:1em; margin:.75em 30px;} 

这 样 ,段落 的 垂直 间 踢 始终 会 保持 为 字体 高 度 的 四 分 之 三 (上 下 外 边 距 都 是 .75em， 
车 加 后 还 是 .75em )。 如 果 用 户 增 大 了 字号 , 那么 不 仅 段落 中 的 文本 会 变 大 , 段 间 距 
也 会 成 比例 变 大 。 这 样 ， 页面 的 整体 布局 就 会 比较 协调 一 致 。 与 此 同时 , 使 用 像素 
单位 的 左 、 右 外 边 距 不 会 改变 。 我 想 ， 你 应 该 也 不 会 想 让 字号 变化 影响 到 布局 宽 
度 吧 。 


盒子 有 多 大 


无 论 是 对 初学 者 ， 还 是 对 专家 来 说 ，W3C 盒 模型 的 原理 都 是 CSS 最 难 理解 的 地 方 。 
在 接 下 来 的 讨论 中 ， 我 们 将 分 别 介绍 块 级 元 素 ( 比如 标题 、 段 落 和 列表 ) 和 行内 元 
素 的 不 同行 为 。 

为 此 ， 我 们 得 一 步 一 步 地 回顾 盒 模型 。 首 先 ， 谈 一 谈 设 定 盒 子 的 宽度 ， 因 为 控制 元 
素 的 宽度 是 创建 多 栏 布局 的 头等 大 事 。 一 开始 我 们 会 看 到 给 没有 宽度 的 元 素 添 加 边 
框 、 内 边 距 和 外 边 距 的 效果 ， 然 后 再 看 看 通过 CSS 给 它 设 置 了 宽度 之 后 ， 它 的 行为 
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有 什么 不 一 样 。 
1. 没有 宽度 的 盒子 


dad ti 宽度 ”就 是 指 没有 显 式 地 设置 元 素 的 width 属性 ， 这 是 我 专门 为 你 造 的 
一 个 词 一 一 等 等 ， 求 你 了 ， 真 不 用 谢 我 。 另 外 ,“ 元 素 ” 和 “盒子 ”从 现在 起 代表 同 
一 个 意思 ， 至 于 选择 哪 一 个 ， 就 要 看 到 时 候 两 者 哪个 最 直接 明了 。 





如 果 不 设 置 块 级 元 素 的 width 属性 ， 那 么 这 个 属性 的 默认 值 是 auto， 结 果 会 让 元 素 
的 宽度 扩展 到 与 父 元 素 同 宽 。 下 面 我 们 来 看 一 个 宽度 处 于 auto 状态 的 元 素 。 就 使 用 
下 面 这 么 简单 的 标记 吧 : 








随 着 HTMLS 时 代 的 到 来 ,以 及 旧版 浏览 器 退出 历史 舞台 ,用 于 确保 站 点 在 严格 模式 
(使 用 W3C 标准 的 盒 模 型 ) 或 混杂 模式 (适应 IE6 及 更 早 版 本 的 盒 模型 ) 下 呈现 的 
XHTML 文档 声明 也 就 不 再 需要 了 。 要 了 解 什么 是 混杂 模式 ， 请 参考 这 篇 文章 : 


http://www.quirksmode.org/css/quirksmode.html o 


«body» 
<p>This element's width property is not set.«/p» 
«/body» 


再 配 上 以 下 CSS: 


body (font-family:helvetica, arial, sans-serif; font-size:1em; margin:Opx; 
background-color :#caebff; } 
p {margin:0; background-color:#fff;} 


元 素 body 上 ， 我 们 设 定 了 字体 、 背 景 颜色 ， 删 除了 默认 的 外 边 距 ， 这 些 设 定 
Ea 盒子 宽度 的 盒子 中 将 一 直 保 持 不 变 。 而 对 于 其 中 的 段落 ， 我 们 也 删除 了 默认 
的 外 边 距 。 删除 了 外 边 距 后 , body 元 素 会 填 满 浏览 器 和 窗口, 而 段落 会 填 满 body 元 素 ， 
如 图 3-8 所 示 。 











为 了 让 大 家 看 清 每 一 步 都 发 生 了 什么 ,我 特地 在 窗口 上 方 添加 了 一 张 标尺 图 片 ( 代 
码 没有 给 出 )。 这 样 ， 我 也 可 以 为 了 这 个 例子 把 浏览 器 窗口 精确 地 缩小 到 400 像 
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eoo How Big Is a Box? 


This element's width property is not set, so it expands to 
the width of its container, body. No borders, padding, or 
margins are applied to this element. 





3-8 ”这 个 段落 没有 边框 、 内 边 距 和 外 边 距 


在 没有 边框 、 内 边 距 ， 也 没有 外 边 距 的 情况 下 ， 段 落 的 文本 扩展 到 了 与 body 元 素 同 


宽 。 接 下 来 用 内 边 距 给 文本 两 侧 添加 一 些 空白 ， 如 图 3-9 所 示 。 


/* 为 简明 起 见 ， 省 略 了 字体 声明 */ 
p (margin:0; background-color:#fff; padding:0 20px;] 


eoo How Big Is a Box? 
This element's width property is not set, so it 


expands to the width of its container, body. 20 
pixels of padding have been added on each side, 


so the content's width is reduced by 40 pixels. 





3-9 ”内 边 距 使 文本 块 变 罕 了 


添加 了 内 边 距 后 ， 文 本 块 的 宽度 变 成 了 360 像素 ( 两 边 各 加 了 20 像素 内 边 距 )。 


接 下 来 ， 我 们 再 给 段落 左右 两 边 各 添加 6 像素 宽 的 边框 ,结果 如 图 3-10 所 示 。 


p (margin:0; background-color:#fff; padding:0 20px; 
border:solid red; border-width:O 6px 0 6px;) 
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eoo How Big Is a Box? 


Ld » 





This element's width property is not set, so it 
expands to the width of its container, body. 20 
pixels of padding and a 6 pixel border have been 
added on each side, so the content's width is 
reduced by 52 pixels. 





图 3-10 ”添加 边框 会 进一步 减少 内 容 区 的 宽度 


为 两 边 Es ou eu c NS ME 
最 后 ， 再 给 左右 两 边 各 加 一 些 外 边 距 ， 结 果 如 图 3-11 所 示 。 


p {margin:0 30px; background-color:itfff; padding:0 20px; border:solid red; 
border-width:O 6px 0 6px;} 


eoo How Big Is a Box? 





This element's width property is not set, 
so it expands to the width of its 
container, body. 20 pixels of padding, a 
6 pixel border and a margin of 30 pixels 
have been added on each side, so the 
content's width is reduced by 112 pixels. 





图 3-11 加 上 边框 、 内 边 距 和 外 边 距 后 ， 内 容 区 变 得 更 罕 了 


外 边 中 在 元 素 盒 子 与 窗口 之 间 创 造 了 空白 , 此 时 内 容 宽度 变 成 了 288 像素 (400-((C20+ 
6 十 30) x 2) )。 而 元 素 声明 的 总 宽度 并 没有 变 ， 仍然 是 400 像素 。 








使 模型 结论 一 : 没有 (就 是 没有 设置 width 的 ) 宽度 的 元 素 始 终 会 扩展 到 填 满 其 父 
元 素 的 宽度 为 止 。 添 加 水 平 边框 、 内 边 距 和 人 外边 距 ,会 导致 内 容 宽度 减少 ,减少 量 
等 于 水 平 边框 、 内 边 距 和 外 边 距 的 和 。 

2. 有 宽度 的 盒子 


好 了 ， 接 下 来 我 们 再 做 一 遍 同 样 的 练习 ， 但 这 一 次 先 用 CSS 声明 元 素 的 宽度 ， 如 图 
3-12 所 示 。 


32 ”盒子 有 多 大 


/* 为 简明 起 见 ， 省 略 了 字体 声明 */ 
p {width:400px; background-color:#fff; margin:0;} 


eoo How Big Is a Box? 
EN EI e |fa- J 
H bil [En 1 diss LL IE 1 E LL n LL E LI ne 1 IEEE I E 四 


This element's width is set to 400 pixels. No borders, 
padding, or margins are applied to this element. 

















3-12 ”明确 设 定 width 属性 后 ， 块 级 元 素 就 不 会 再 扩展 到 与 父 元 素 CB body) 同 宽 了 


这 一 次 ， 段 落 有 了 固定 的 宽度 400 像素 。 在 没有 内 边 距 的 情况 下 ， 内 容 区 也 是 声明 
的 宽度 ， 因 此 文本 与 盒子 接触 。 下 面 给 这 个 元 素 添加 20 像素 的 内 边 距 : 





p (width:400px; background-color:ifff; margin:0; padding:0 20px;) 


有 了 前 一 个 例子 的 经 验 , 你 可 能 会 认为 这 一 次 内 容 区 宽度 会 缩小 到 360 像素 , 可 是 
你 错 了 ! 在 给 盒子 设 定 宽度 后 ， 添 加 内 边 距 会 导致 元 素 比 原来 宽 了 40 像素 ， 如 图 
3-13 所 示 。 


eoo How Big Is a Box? 
EN IL 


" TEE I L ii LN | L mg ren Ten LL [s LI EUM L |l LL En L E 
This element width is set to 400 pixels. On each side of 
the box, the padding is 20 pixels, so the total width is 

now 440 pixels. 













e oa- 

















图 3-13 ”添加 内 边 距 使 盒子 变 宽 
要 是 再 给 盒子 两 边 各 添加 6 像素 的 边框 呢 ， 结 果 如 图 3-14 所 示 。 


p (width:400px; background-color:itfff; margin:0;padding:0 20px; border:solid 
red; border-width:O 6px 0 6px;} 

盒子 比 刚 才 又 宽 了 12 像素 。 现 在 ， 原 来 400 像素 宽 的 盒子 变 成 了 452 像素 (620 

400 + 20 + 6 = 452); 
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eoo How Big Is a Box? 


Buc ea ) 





This element width is set to 400 pixels. On each side of 
the box, the padding is 20 pixels and the border is 6 
pixels, so now the total width of the element is 452 
pixels. 





图 3-14 ”添加 边框 使 盒子 更 宽 了 
最 后 ， 再 给 元 素 左 、 右 两 边 添加 一 些 外 边 距 ， 如 图 3-15 所 示 。 


p (width:400px; background-color:#fff; margin:0 30px; padding:0 20px; 
border:solid red; border-width:O 6px 0 6px;} 


eoo How Big Is a Box? 


Lc e Ka ) 





This element width is set to 400 pixels. On each side of 
the box, the padding is 20 pixels and the border is 6 
pixels, so now the total width of the element is 452 
pixels. With the addition of 30 pixels of margins each 
side the element, the total width claimed by this element 
is 512 pixels. 





图 3-15 ”外边 距 在 盒子 周围 添加 了 空白 ， 为 了 展示 盒子 占据 的 空间 ， 浏 览 器 窗口 也 拉 大 了 


添加 的 这 30 像素 外 边 距 ， 进 一 步 增 大 了 元 素 占据 的 空间 ， 目 前 总 宽度 已 达到 512 像 
素 (30+6+20+400+20+6+30=512 )。 





盒 模 型 结论 二 : 为 设 定 了 宽度 的 盒子 添加 边框 、 内 边 距 和 外 边 距 ， 会 导致 盒子 扩展 
得 更 宽 。 实 际 上 ， 盒 子 的 width 属性 设 定 的 只 是 盒子 内 容 区 的 宽度 ， 而 非 盒子 要 占 
据 的 水 平 宽度 。 


为 什么 我 要 这 人 么 不 厌 其 烦 地 演示 没有 宽度 的 盒子 和 有 宽度 的 盒子 , 在 被 添加 了 边框 、 
内 边 距 和 外 边 距 时 所 表现 出 来 的 不 同行 为 呢 ? 这 两 种 盒子 所 表现 出 来 的 完全 不 同 的 
行为 ， 对 将 来 构建 多 栏 布 局 具有 重要 的 启示 。 因 为 在 多 栏 布 局 中 ， 每 一 栏 都 必须 时 





3.3 ”浮动 与 清除 


刻 维护 自己 的 宽度 。 第 5 章 将 会 讨论 的 “浮动 布局 "， 在 列 宽 由 于 边框 、 内 边 距 和 外 
边 距 被 修改 而 意外 加 宽 的 情况 下 ,会 出 现 显 示 错 误 。 


CSS3 新 增 了 一 个 box-sizing 属性 ,通过 它 可 以 将 有 宽度 的 盒子 也 设 定 成 具有 默认 的 
auto 状态 下 的 行为 。 但 只 有 最 新 版 本 的 浏览 器 才 支 持 该 属性 ， 所 以 在 本 书写 作 时 
(2012 年 夏天 )， 我 还 不 能 推荐 你 使 用 它 。 


总 之 ， 你 要 记 住 一 点 : 设 定 了 元 素 的 width 属性 后 ， 再 给 元 素 添加 边框 、 内 边 距 和 
外 边 距 ， 元 素 的 行为 与 默认 的 auto 状态 下 会 有 截然 不 同 的 表现 。 


下 一 节 我 们 聊 一 聊 浮 动 和 清除 ， 它 们 可 是 在 创建 CSS 布局 之 前 都 必须 理解 的 关键 
技术 。 


3E :在 

浮动 与 清 

浮动 和 清除 是 用 来 组 织 页 面 布局 的 又 一 柄 利 剑 ， 这 柄 剑 的 剑 刃 就 是 float 和 clear 
属性 。 浮 动 ， 你 看 这 俩 字 儿 多 形象 ， 意 思 就 是 把 元 素 从 常规 文档 流 中 拿 出 来 。 拿 出 
来 干什么 ?一 是 可 以 实现 传统 出 版 物 上 那 种 文字 绕 排 图 片 的 效果 ， 二 是 可 以 让 原来 
上 下 堆 释 的 块 级 元 素 ， 变 成 左右 并 列 ， 从 而 实现 布局 中 的 分 栏 。 


浮动 元 素 脱离 了 常规 文档 流 之 后 ， 原 来 紧 跟 其 后 的 元 素 就 会 在 空间 允许 的 情况 下 ， 
向 上 提升 到 与 浮动 元 素平 起 平 坐 。 








如 果 浮 动 元素 后 面 有 两 个 段落 ， 而 你 只 想 让 第 一 段 与 浮动 元 素 并 列 ( 就 算 旁边 还 能 
放下 第 二 段 ， 也 不 想 让 它 上 来 )， 怎 么 办 ? 用 clear 属性 来 “清除 ”第 二 段 ， 然 后 它 
WEE HA ETE SIIDUR PIT s 


影响 浮动 的 因素 还 有 很 多 ,推荐 读者 看 一 看 Eric Meyer $9 PRA Cascading Style Sheets 
2.0 Programmer $ Reference ( 2006, McGraw-Hill Osborne Media )。 这 里 摘录 Eric 
在 那 本 书 里 写 的 一 句 话 :“ 当 你 浮动 一 个 元 素 的 时 候 …… 这 些 (浮动 ) 规则 就 好 像 
在 说 :“ 尽 量 把 这 个 元 素 往 上 放 ， 能 放 多 高 放 多 高 ， 直 到 碰 到 某 个 元 素 的 边界 为 
止 。 ”即使 这 本 书 的 出 版 年 份 是 2006 年 , 但 它 仍然 是 任何 CSS 高 手 必 备 的 一 本 参 
考 书 。 这 本 书 涵盖 了 CSS 运行 机 制 的 方方面面 ， 其 中 很 多 在 别 的 书 里 是 找 不 
到 的 。 


zug 
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在 详细 介绍 这 两 个 属性 之 前 ， 有 必要 先 给 读者 提 个 醒 。 虽 然 浮动 元 素 是 必要 的 也 是 
非常 有 用 的 CSS 技术 ， 但 浮动 之 后 可 能 带 来 各 种 令 CSS 初学 者 困惑 的 问题 。 毕 竞 ， 
浮动 的 内 容 已 经 脱离 了 文档 流 ， 因 而 无 论 原 先 在 标记 中 包含 它 还 是 跟随 它 的 元 素 ， 
其 布局 都 会 受到 它 的 影响 。 不 过 不 要 紧 ， 本 方 后 面 展示 浮动 与 清除 的 例子 都 经 过 了 
仔细 推 殴 ， 我 希望 通过 这 些 例 子 能 让 你 真正 理解 并 掌握 译 动 技术 。 




















3.3.1 浮动 


» 
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CSS 设计 float 属性 的 主要 目的 ， 是 为 了 实现 文本 绕 排 图 片 的 效果 。 然 而 ， 这 个 属 
性 居然 也 成 了 创建 多 栏 布局 最 简单 的 方式 。 





CSS3 Multi-column Layout Module 规定 了 如 何 用 CSS 定义 多 栏 布局 。 但 在 本 书写 作 
时 ， 只 有 Opera 和 IE10 支持 相应 属性 。 因 此 在 可 以 预见 的 未 来 ，float 属性 仍然 是 
创建 多 栏 布局 的 最 佳 途径 。 


那 就 让 我 们 从 实现 文本 绕 排 图 片 的 效果 开始 吧 。 
1. 文本 绕 排 图 片 
为 了 实现 文本 绕 排 图 片 的 浮动 效果 , 必须 在 标记 中 先 写 图 片 , 然后 再 写 环绕 它 的 文本 。 





«img ... /> 
«p»..the paragraph text..«/p» 


CSS 规则 如 下 。 


/* 为 简明 起 见 ， 省 略 了 字体 声明 */ 

p (margin:0; border:1px solid red;} 
/* 外 边 距 防止 图 片 紧 挨 文本 */ 

img (float:left; margin:0 4px 4px 0;} 


以 上 规则 会 让 图 片 浮 动 到 左 侧 ， 从 而 让 文本 绕 排 到 右 侧 ， 如 图 3-16 所 示 。 

说 得 形象 一 点 ， 在 你 浮动 一 张 图 片 或 者 其 他 元 素 时 ， 你 是 在 要 求 浏 览 咒 把 它 往 上 方 
推 ， 直 到 它 碰 到 父 元 素 〈 也 就 是 body 元 素 ) 的 内 边界 。 后 面 的 段落 ( 带 灰 色 边框 ) 
不 再 认为 浮动 元 素 在 文档 流 中 位 于 它 的 前 面 了 ,因而 它 会 占据 父 元 素 左上 角 的 位 置 。 
不 过 ， 它 的 内 容 (文本 ) 会 绕 开 浮动 的 图 片 。 
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eoo Flowing Text Around an Image 


[Mel — ela J 








This is the text that wraps around the floated 
image. You usually want to add a small right 
and bottom margin to the image so that the text 
does not touch it. Once the text passes the 
bottom of the image it returns to its normal state 

nd flows full width across its parent element. The text 
border is dispayed red here to show that only the text 
reflows. The element box behaves as if the image is not 
here at all. 











3-16 浮动 图 片 会 从 文档 流 中 被 移 除 ， 如 果 在 标记 中 有 文本 元 素 跟 在 它 后 面 ， 
则 其 中 的 文本 会 绕 开 图 片 


x» 浮动 非 图 片 元 素 时 ， 必 须 给 它 设 定 宽 度 ， 否 则 后 果 难 以 预料 。 图 片 无 所 谓 ， 因 为 它 
$ 本 身 有 默认 的 宽度 。 


2. 创建 分 栏 


在 此 基础 上 创建 多 栏 ， 只 要 再 用 一 次 float 属性 ， 就 这 么 简单 。 如 图 3-17 所 示 ， 只 
要 给 段落 设 定 宽度 ， 然 后 也 浮动 它 即 可 。 


p {float:left; margin:0; width:200px; border:1px solid red;} 
img {float:left; margin:0 4px 4px 0;} 


eoo Flowing Text Around an Image 
EN 四 EC 


his paragraph element 

now has a width setting and 
| Iis floated left, just like the 

image. This causes the 

lement to form a column 
next to the image. This 
behavior is the basis of 

reating layouts using 
loated columns. 














图 3-1 浮动 图 片 旁边 的 固定 宽度 段落 一 经 浮动 ， 就 会 变 成 布局 中 的 一 栏 ， 
其 文本 也 不 会 再 绕 排 图 片 了 
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你 这 样 同时 浮动 图 片 和 “有 宽度 的 ”上 段落， 会 导致 段落 的 文本 绕 排 效果 消失 ， 而 浮 
动 的 段落 也 会 尽 可 能 向 左 向 上 移动 。 就 这 样 ， 这 个 段落 就 构成 了 紧 挨 着 图 片 的 一 栏 。 
这 就 是 使 用 float 属性 创建 多 栏 布 局 的 原理 。 换 句 话 说， 如 果 几 个 相 邻 的 元 素 都 具 
有 设 定 的 宽度 ， 都 是 浮动 的 ， 而 且 水 平 空 间 也 足以 容纳 它们 ， 它 们 就 会 并 列 排 在 
15 

如 果 你 创建 了 三 个 浮动 、 固 定 宽 度 的 元 素 ， 它 们 就 会 像 这 样 并 排 在 一 行 ， 构 成 三 栏 
布局 的 框架 。 每 个 元 素 都 可 以 作为 容器 ， 包 含 其 他 元 素 。 关 于 译 动 布局 的 内 容 ， 我 
们 将 在 第 5 章 再 详细 讨论 。 

接 下 来 我 们 再 看 看 浮动 的 男 一 面 ， 这 也 是 必须 得 理解 的 。 浮 动 元 素 位 于 “文档 流 外 
部 ”， 因 而 它 已 经 不 被 包含 在 标记 中 的 父 元 素 之 内 了 。 正 因为 如 此 ， 它 对 布局 可 能 7 
生 破 坏 性 影响 。 





3.3.2 ” 围 住 浮动 元 素 的 三 种 方法 
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浮动 元 素 脱离 了 文档 流 ， 其 父 元 素 也 看 不 到 它 了 ， 因 而 也 不 会 包围 它 。 这 种 情况 有 
时 候 并 非 我 们 想 要 的 ， 本 节 向 大 家 传授 三 种 围 住 浮动 子 元 素 的 方法 。 记 住 ， 这 三 种 
方法 你 都 得 掌握 ， 这 样 才 能 审时度势 ， 选 择 最 合适 的 一 种 。 


为 了 演示 浮动 元 素 的 行为 ， 这 种 行为 对 布局 会 产生 什么 影响 ， 以 及 解决 这 个 问题 的 
三 种 方法 ,我 们 首先 要 从 一 张 带 标 题 的 图 片 开 始 。 图 片 和 标签 包含 在 一 个 section 
元 素 中 ， 而 section 元 素 后 面 跟着 一 个 footer 元 素 。 可 以 把 这 个 footer 元 素 想 象 成 
很 多 网 页 底部 都 会 有 的 与 页 面 同 宽 的 页 脚 。 








«section» 
«img src-"images/rubber duck2.jpg"» 
«p»It's fun to float.«/p» 
«/section» 
«footer» Here is the footer element that runs across the bottom of the 
page.«/footer» 


这 样 ， 你 才 会 知道 究竟 会 发 生 什 么 。 图 3-18 展示 了 应 用 以 下 规则 后 的 section 和 
footer 的 元 素 盒子 。 


section {border:1px solid blue; margin:O 0 10px 0;} 
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/* 删 除 默 认 的 上 下 外 边 距 */ 

p {margin 0;} 

/* 为 简明 起 见 ， 省 略 了 字体 声明 */ 
footer {border:1px solid red;} 


$0756) Three Ways to Enclose Floated Elements 
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It's fun to float. 


Here is the footer element that runs across the bottom of the 
page. 


3-18 可 以 看 到 页 面 中 的 两 个 块 级 元 素 section 和 footer ， 前 者 包含 一 张 图 片 及 标题 ， 

后 者 在 常规 文档 流 中 位 于 前 者 下 方 
现在 我 们 看 到 的 是 常规 文档 流 ， 即 块 级 元 素 包 围 着 所 有 子 元 素 ， 而 且 在 页 面 中 自 上 
而 下 相互 堆 闭 在 一 起 。 假 设 我 们 想 让 图 片 标题 位 于 图 片 右 侧 ， 而 不 是 像 现 在 这 样 位 
于 下 方 。 运 用 刚刚 学 到 的 知识 ， 我们 知道 实现 这 个 日 标 最 简单 的 方式 就 是 浮动 图 片 。 
试 试看 吧 。 














section {border:1px solid blue; margin:0 0 10px 0;} 
img (float:left;) 
footer {border:1px solid red;} 


图 3-19 展示 了 结果 。 


AMA Three Ways to Enclose Floated Elements 
[*]» ML] e Ya ) 


ts fun to float. 


















Here is the footer element that runs across the 
bottom of the page. 












3-19 浮动 图 片 后 标题 跑 到 了 右边 ， 但 父 元 素 section 也 收缩 到 只 包含 文本 的 高 度 高 度 
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妈 呀 ! 标题 倒是 跑 到 右边 了 , 可 section 也 不 再 包围 浮动 元 素 了 , 它 只 包围 非 浮动 的 
元 素 。 于 是 ，footer 被 提 了 上 来 ， 紧 挨 着 前 一 个 块 级 元 素 section。 这 样 是 没 错 
儿 ， 可 结果 呢 ， 不 是 我 们 想 要 的 。 





方法 一 : 为 父 元 素 添 加 overflow:hidden 


第 一 个 方法 很 简单 ， 缺 点 是 不 太 直 观 ， 即 为 父 元 素 应 用 overflow:hidden， 以 强制 它 
包围 浮动 元 素 。 





section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;} 

img {float:left;} 

p {border:1px solid red;} 

把 overflow:hidden 声明 应 用 到 容器 元 素 后 , footer 又 回 到 了 我 们 期 望 的 位 置 , 如 图 
3-20 所 示 。 


AMA Three Ways to Enclose Floated Elements 


TN Cs e Ka > 


E t's fun to float. 
iS 
Uwe 


Here is the footer element that runs across the bottom of the 
page. 





























图 3-20 ”给 容器 元 素 应 用 overflow:hidden 声明 后 ， 它 又 包围 了 浮动 元 素 


实际 上 ，overflow:hidden 声明 的 真正 用 途 是 防止 包含 元 素 被 超大 内 容 撑 大 。 应 用 
overflow:hidden 之 后 ， 包 含 元 素 依然 保持 其 设 定 的 宽度 ， 而 超大 的 子 内 容 则 会 被 容 
Zy, Aez h, overflow:hidden 还 有 另 一 个 作用 ， 即 它 能 可 靠 地 人 迫使 父 元素 
包含 其 浮动 的 子 元 素 。 

方法 二 : 同时 浮动 父 元 素 

第 二 种 促使 父 元 素 包 围 其 浮动 子 元 素 的 方法 ， 是 也 让 父 元 素 浮动 起 来 。 

section {border:1px solid blue; float:left; width:100?6;] 


img (float:left;] 
footer {border:1px solid red; clear:left;] 


浮动 section 以 后 , 不 管 其 子 元 素 是 否 浮 动 , 它 都 会 紧 紧 地 包围 dE ) fk 
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它 的 子 元 素 。 因 此 ， 需 要 用 width:100% 再 让 section 与 浏览 絮 容 絮 同 宽 。 男 外 ， 由 
于 section 现在 也 浮动 了 ， 所 以 footer 会 努力 往 上 挤 到 它 旁 边 去 。 为 了 强制 footer 
依然 果 在 section 下方 , 要 给 它 应 用 clear:left。 被 清除 的 元 素 不 会 被 提升 到 浮动 元 
素 的 旁边 。 以 上 代码 能 得 到 与 图 3-20 相同 的 效果 。 








方法 三 : 添加 非 浮动 的 清除 元 素 


第 三 种 强制 父 元 素 包 含 其 浮动 子 元 素 的 方法 ， 就 是 给 父 元 素 的 最 后 添加 一 个 非 浮动 的 
子 元 素 ， 然 后 清除 该 子 元 素 。 由 于 包含 元 素 一 定 会 包围 非 浮动 的 子 元 素 ， 而 且 清 除 会 
让 这 个 子 元 素 位 于 ( 清除 一 侧 ) 浮动 元 素 的 下 方 ， 因 此 包含 元 素 一 定 会 包含 这 个 子 元 
素 一 一 以 及 前 面 的 序 动 元 素 。 在 包含 元 素 最 后 添加 子 元 素 作为 清除 元 素 的 方式 有 两 种 。 











第 一 种 方式 不 太 理 想 ， 也 就 是 简单 地 在 HTML 标记 中 添加 一 个 子 元 素 ， 并 给 它 应 用 
clear 属性 。 由 于 没有 默认 的 样式 ， 不 会 引入 多 余 空间 ，div 元 素 很 适合 这 个 目的 。 





«section» 
«img src-"images/rubber duck.jpg"» 
«p»It's fun to float.«/p» 
«div class-"clear me"»«/div» 

«/section» 

«footer» Here is the footer element..«/footer» 


在 此 ,我 为 div 添加 了 一 个 类 ， 以 便于 在 CSS 中 添加 它 。 


section {border:1px solid blue;] 

img (float:left;) 

.Clear me (clear:left;) 

footer {border:1px solid red;} 

这 样 ， 浮 动 的 元 素 被 父 元 素 包 围 住 了 ， 结 果 如 图 3-20 所 示 。 如 果 你 特别 不 想 添加 这 
个 纯 表现 性 元 素 ， 我 再 告诉 你 一 个 用 CSS 来 添加 这 个 清除 元 素 的 方法 。 首 先 ， 要 给 


section 添加 一 个 类 。 








«section class-"clearfix"» 
«img src-"images/rubber duck.jpg"» 
«p»It's fun to float.«/p» 

«/section» 

«footer» Here is the footer element..«/footer» 


然后 ， 再 使 用 这 个 神奇 的 clearfix 规则 ! 
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.Clearfix:after { 


content:"."; 

display:block; 

height:0; 

visibility:hidden; 

clear:both; 
} 
这 个 clearfix 规则 最 早 是 由 程序 员 Tony Aslett 发 明 的 , 它 只 添加 了 一 个 清除 的 包含 名 
点 作为 非 浮动 元 素 ( 必须 得 有 内 容 ， 而 句点 是 最 小 的 内 容 ) "。 规 则 中 的 其 他 声明 是 
为 了 确保 这 个 伪 元 素 没有 高 度 ， 而 且 在 页 面 上 不 可 见 。 


使 用 clear:both 意味 着 section 中 新 增 的 子 元 素 会 清除 左 、 右 浮动 元 素 (位 于 左 、 右 浮 
动 元 素 下 方 ) 这 里 当然 可 以 只 用 left, 但 both 也 适用 于 将 来 图 片 float:right 的 情况 。 


同样 ， 浮 动 的 元 素 又 像 图 3-20 所 示 的 一 样 被 包围 住 了 。 但 这 次 标记 里 没有 额外 人 硬 编 
码 的 元 素 。 好 奇 的 话 ， 你 可 以 临时 把 clearfix 规则 中 的 height 和 visibility 声明 删 
除 ， 看 一 看 通过 伪 元 素 添加 到 标记 中 的 句点 。 


我 在 自己 写 的 所 有 网 站 中 都 使 用 clearfix 规则 来 解决 浮动 问题 ， 因 为 浮动 是 实现 多 栏 
布局 (在 更 多 浏览 器 支持 CSS3 的 Multi-column Layout Module 之 前 ) 唯一 最 可 靠 的 
方式 。 这 一 点 第 5 章 会 跟 大 家 详细 解释 。 





好 了 ， 该 回 过 头 来 作 个 总 结 了 。 要 想 强 迫 父 元 素 包 围 其 序 动 的 子 元 素 有 三 种 方式 ， 
哪 三 种 ? 


a 为 父 元 素 应 用 overflow:hidden 

口 浮动 父 元 素 

O 在 父 元 素 内 容 的 末尾 添加 非 浮 动 元 素 ， 可 以 直接 在 标记 中 加 ， 也 可 以 通过 给 父 元 
素 添加 clearfix 类 来 加 ( 当然 ， 样 式 表 中 得 需要 相应 的 clearfix 规则 ) 








这 三 种 方法 的 使 用 要 因地制宜 。 比 如 ， 不 能 在 下 拉 菜 单 的 顶级 元 素 上 应 用 
overflow:hidden， 否 则 作为 其 子 元 泰 的 下 拉 菜 单 就 不 会 显示 了 。 因 为 下 拉 菜 单 会 显 
示 在 其 父 元 素 区 域 的 外 部 ， 而 这 恰恰 是 overflow:hidden 所 要 阻止 的 。 再 比如 , 不 能 
对 已 经 靠 自动 外 边 距 居中 的 元 素 使 用 “浮动 父 元 素 ” 技 术 ， 否 则 它 就 不 会 再 居中 ， 




















(D after 会 在 元 素 内 容 后 面 而 不 是 元 素 后 面 插入 一 个 伪 元 素 。 一 一 译 者 注 
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而 是 根据 浮动 值 浮动 到 左边 或 右边 了 。 总 之 ， 掌 握 了 这 三 种 技术 之 后 ， 再 碰 到 需要 
包 轩 浮动 元 素 的 情况 ， 你 就 能 够 游 思 有 余 了 。 


没有 父 元 素 时 如 何 清 除 


有 时 候 ， 在 清除 某 些 浮动 元 素 时 ， 不 一 定 正 好 有 那么 个 父 元 素 可 以 作为 容 融 来 强行 
包围 它们 。 此 时 ， 最 简单 的 办 法 就 是 给 一 个 浮动 元 素 应 用 clear:both， 强 迫 它 定位 
在 前 一 个 浮动 元 素 下 方 。 然 而 ， 在 空间 足以 容纳 多 个 元 素 向 上 浮动 时 ， 这 个 简单 的 
办 法 未 必 奏 效 ， 我 们 还 得 男 尽 踩 径 。 


为 了 演示 这 种 情况 ， 图 3-21 展示 了 一 个 页 面 ， 其 中 包含 6 个 元 素 : 3 张 图 片 和 介绍 
它们 的 3 个 文本 段落 。 这 个 页 面 布局 是 通过 浮动 图 片 实现 的 ， 因 此 在 标记 中 跟 在 图 
片 后 面 的 文本 会 向 上 走 ， 停 菲 在 浮动 图 片 的 右 侧 。 


AMA UsingClearWithouta Containing Element 
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text move up next 
o the previous image. This problem can 
be solved by the use of the clear property. 














图 3-21 由 于 第 二 段 文 字 下 方 有 空间 ， 所 以 第 三 张 图 片 及 说 明文 字 会 上 浮 到 第 二 张 图 片 右 侧 ， 
这 不 是 我 们 想 要 的 结果 


以 下 是 图 3-21 中 页 面 对 应 的 HTML ( 为 节省 版 面 ， 删 除了 部 分 文字 ): 


«section» 
«img src-"images/rubber duck3.jpg"» 
<p>This text sits next to the image and because the..«/p» 
«img src-"images/beach ball.jpg"» 
<p>This text is short, so the next image can float up..«/p» 
«img src-"images/yellow float.jpg"» 
«p»Because the previous image?'s text does not..«/p» 
«/section» 
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相应 的 CSS 如 下 : 


section {width:300px; border:1px solid red;} 

img (float:left; margin:0 4px 4px 0;} 

/* 为 简明 起 见 ， 省 略 了 字体 声明 */ 

p {margin:0 O 5px 0;} 

我 们 的 目标 是 让 每 段 文 字 停靠 在 相应 的 图 片 旁边 。 然 而 ， 第 二 段 文字 太 短 了 ， 都 没 
有 够 到 第 二 张 浮动 图 片 的 下 沿 。 这 就 给 下 一 对 儿 图 片 /段落 向 上 浮动 留 出 了 空间 。 


这 个 例子 中 的 布局 效果 从 技术 角度 看 是 正确 的 : 第 三 对 儿 图 片 / 段 落 有 条 件 CHER 
间 ) 停靠 在 第 二 张 浮动 图 片 旁 边 ， 于 是 它们 就 写 不 客气 地 靠 了 过 去 。 毕 况 ， 浮动 元 
素 的 使 命 不 就 是 尽 可 能 地 向 左上 或 右上 迁移 吗 。 可 这 个 视觉 上 的 结果 却 不 是 我 们 想 
要 的 。 


由 于 每 一 对 儿 图 片 /段落 都 没有 包含 元 素 ， 在 此 就 无 法 使 用 前 面 讨论 的 “ 强 种 
包围 ”的 战术 。 不 过 ,我 照样 可 以 使 用 clearfix 规则 呀 ! 














c 


父 元 素 


.Clearfix:after ( 
content:"."; 
display: piod: 
height:0; 
visibility:hidden; 
clear:both; 

} 


像 这 样 给 每 个 段落 都 加 上 clearfix 类 : 


«section» 
«img src-"images/rubber duck3.jpg"» 
«p class-"clearfix'»This text sits next to the image and because the..«/p» 
«img src-"images/beach ball.jpg"» 
«p class-"clearfix"»This text is short, so the next image can float up..«/p» 
«img src-"images/yellow float.jpg"» 
«p class-"clearfix"»Because the previous image's text does not.«/p». 
«/section» 


如 图 3-22 所 示 , 在 每 个 段落 内 容 的 最 后 添加 了 “清除 子 元 素 ”“, 我 们 想 要 的 布局 效果 
实现 了 。 因 为 第 三 对 儿 图 片 和 段落 前 面 增 加 了 一 个 清除 元 素 ， 所 以 它们 就 不 能 再 往 
上 走 了 。 注 意 ， 我 没有 只 给 第 二 个 段落 添加 clearfix 类 ， 而 是 每 个 段落 都 加 上 了 一 





3.4 定位 


个 。 如 果 是 真正 的 网 站 开发 ， 就 得 这 么 做 啊 。 这 样 ， 无 论 将 来 哪个 段落 的 文本 高 度 
低 于 图 片 了 ， 页 面 布局 都 不 会 被 破坏 。 





AMA Using Clear Without a Containing Element 
EI 四 e Jo ) 


| < This text sits next to the image 
«^4 PW and because the text extends 

' below the bottom of the image, 
1 the next image positions itself 
rj correctly under the previous 










也 


image. 
— This text is short, so the next 
- image can float up beside this 
| one. 


- This is the text for the third 
image. When the clear 
property is applied, the image 
^ can no longer float up and sits 
in the desired position. 











3-22 ”通过 clearfix 类 添加 了 清除 元 素 后 ， 布 局 就 跟 我 们 期 望 的 一 样 了 


说 到 这 儿 ， 相 信 读 者 对 float 和 clear 属性 都 有 了 深入 理解 了 。 本 章 最 后 , 青 给 大 家 
介绍 两 个 对 CSS 布局 至 关 重 要 的 属性 : position fll display. 


3.4 定位 


CSS 布局 的 核心 是 position 属性 ， 对 元 素 盒 子 应 用 这 个 属性 ， 可 以 相对 于 它 在 常规 
文档 流 中 的 位 置 重新 定位 。position 属性 有 4 个 值 : static、relative、absolute、 

fixed， 默 认 值 为 static。 这 些 属性 都 是 什么 意思 ? 别 急 ， 我 会 通过 以 下 4 个 段落 来 
逐个 说 明 。 

<p>First Paragraph«/p» 

«p»Second Paragraph«/p» 

«p id-"specialpara"»Third Paragraph (with ID)«/p» 

«p»Fourth Paragraph«/p» 

在 接 下 来 的 例子 中 ， 我 会 让 第 一 段 、 第 二 段 和 第 四 段 保持 默认 的 static 定位 方式 ， 

但 修改 第 三 段 的 position 属性 。 
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为 了 不 影响 其 他 段落 ， 我 特意 为 第 三 段 添加 了 值 为 specialpara 的 ID. 


3.4.1 静态 定位 


我 们 先 看 一 看 图 3-23， 这 是 四 个 段落 都 采用 默认 静态 定位 的 效果 。 


eoo Static Positioning 


Lal- JC] e a- ) 
First Paragraph 





Second Paragraph 
Third Paragraph (with ID) 
Fourth Paragraph 





图 3-23 ”静态 定位 下 的 块 级 元 素 会 在 默认 文档 流 中 上 下 堆 苇 


在 静态 定位 的 情况 下 ， 每 个 元 素 在 处 在 常规 文档 流 中 。 它 们 都 是 块 级 元 素 ， 所 以 就 
会 在 页 面 中 自 上 而 下 地 堆 琶 起 来 . 想 想 第 1 章 我 们 展示 的 那个 没有 应 用 样式 的 HTML 
布局 ， 那 就 是 默认 的 static 文档 流 。 


要 想 突破 static 定位 提供 的 这 种 按 顺序 布局 元 素 的 方式 , 必须 把 盒子 的 position 属 
性 改 为 其 他 三 个 值 。 


3.4.2 ”相对 定位 
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下 面 我 们 就 把 第 三 段 的 position 属性 设置 为 relative。 光 设置 这 个 属性 还 看 不 出 来 
有 什么 不 一 样 , 因为 你 只 设置 了 它 的 定位 方式 是 “相对 定位 ”。 到 底 相 对 哪里 定位 呢 ? 
相对 的 是 它 原 来 在 文档 流 中 的 位 置 (或 者 默认 位 置 ), 接 下 来 , 可 以 使 用 top, right, 
bottom 和 left 属性 来 改变 它 的 位 置 了 。 但 多 数 情 况 下 , 只 用 top left 就 可 以 实现 
我 们 想 要 的 效果 。 以 下 CSS 规则 


p#specialpara {position:relative; top:25px; left:30px;} 


34 定位 
可 以 得 到 图 3-24 所 示 的 结 


eoo Relative Positioning 


eT e or- ) 
First Paragraph 





Second Paragraph 


Third Paragraph (with ID) 


Fou uiu Qay 





3-24 ”相对 定位 下 ， 可 以 利用 top 和 left 属性 相对 于 元 素 在 文档 流 中 的 常规 位 置 重新 定位 
D 可 以 给 top 和 left 属性 设 定 负 值 ， 把 元 素 向 上 、 向 左 移动 。 


HE, 第 三 段 与 它 在 文档 流 中 的 默认 位 置 相 比 ， 向 下 移动 了 25 像素 ， 向 右 移动 了 
30 像素 。 相 当 于 它 把 自己 从 原来 的 包含 元 素 〈body ) 中 挣脱 出 来 了 ,而且 有 一 部 
分 还 跑 到 了 屏幕 之 外 。 要 注意 ， c da 己 相 对 于 原始 位 置 挪动 了 一 下 之 
外 ， 页 面 没 有 发 生 任何 变化 。 换 句 话 说， 这 个 元 素 原 来 占据 的 空间 没有 动 ， 其 他 
元 素 也 没 动 。 


使 用 相对 定位 的 关键 是 什么 呢 ? 就 是 要 考虑 到 元 素 原 来 的 空间 。 如 图 3-24 所 示 ， 可 
以 给 第 四 段 设 置 一 个 30 像素 或 更 大 的 margin-top 值 , EE F, 从 而 避免 被 重 
新 定位 的 第 三 段 挡住 。 











3.4.3 ”绝对 定位 


绝对 定位 跟 静 态 定位 和 相对 定位 比 ， 绝 对 不 一 样 。 因 为 绝对 定位 会 把 元 素 彻 底 从 文 
档 流 中 拿 出 来 。 好 ， 下 面 我 们 就 修改 例子 中 的 代码 ， 把 relative WR absolute. 


p#specialpara {position:absolute; top:25px; left:30px;] 
图 3-25 显示 了 结果 。 
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eoo Absolute Positioning 


«|» JL e Ma- 】 


First Paragraph 


S Third Paragraph (with ID) 
Cuvui Mag CI ayı apr t 








Fourth Paragraph 





图 3-25 ”绝对 定位 下 ， 元 素 从 文档 流 中 被 “ 连 根 拔 起 ”， 然 后 再 相对 于 其 他 元 素 ( 在 这 里 ， 

是 默认 的 定位 上 下 文 body ) 定位 
在 图 3-25 中 ,可 以 看 到 元 素 之 前 占据 的 空间 被 “回收 了 ”。 这 说 明 , 绝对 定位 的 元 素 
完全 脱离 了 常规 文档 流 ， 它 现在 是 相对 于 顶级 元 素 body 在 定位 。 而 这 自然 而 然 就 引 
出 了 一 个 关于 定位 的 重要 概念 : 定位 上 下 文 。 


关于 定位 上 下 文 ， 首 先 我 们 要 知道 绝对 定位 元 素 默 认 的 定位 上 下 文 是 body 元 素 。 如 
图 3-25 所 示 ， 通 过 top 和 left 设 定 的 偏 移 值 ， 决 定 了 元 素 相对 于 body 元 素 ( 标记 
层次 中 的 祖先 容器 ), 而 不 是 相对 于 它 在 文档 流 中 的 位 置 偏 移 多 远 一 一 这 一 点 与 相对 
定位 的 元 素 不 同 。 


由 于 绝对 定位 元 素 的 定位 上 下 文 是 body， 所 以 在 页 面 深 动 的 时 候 ， 为 了 维护 与 body 
元 素 的 相对 位 置 关系 ， 它 也 会 相应 地 移动 。 

在 介绍 怎么 给 绝对 定位 元 素 设 定 其 他 定位 上 下 文 (body 之 外 的 元 素 ) 之 前 ， 我们 先 
把 4 种 定位 方式 介绍 完 。 接 下 来 看 一 看 固定 定位 。 





3.4.4 固定 定位 
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从 完全 移出 文档 流 的 角度 说 ， 固 定 定位 与 绝对 定位 类 似 。 
p#specialpara (position:fixed; top:30px; left:20px;) 


但 不 同 之 处 在 于 ， 固 定 定 位 元 素 的 定位 上 下 文 是 视 口 〈 浏 览 器 窗口 或 手持 设备 的 屏 
幕 )， 因 此 它 不 会 随 页 面 滚动 而 移动 。 图 3-26 和 图 3-27 展示 了 固定 定位 的 效果 。 


3.4 定位 


eoo Fixed Positioning 
加 四 四 ca- ) 
First Paragraph 
S Third Paragraph (with ID) 
Cuv Mag ai ayı ap: 1 
Fourth Paragraph 
Fifth Paragraph 


Sixth Paragraph $ 











3-26 年 一 看 ， 固 定 定位 很 像 绝对 定位 …… 


eoo Fixed Positioning 


bale ) e Wo ) 


Fourth Paranranh 
Third Paragraph (with ID) 
Fittn Paragraph 





Sixth Paragraph 
Seventh Paragraph 
Eighth Paragraph , 








3-27 eee 但 滚动 页 面 才 发 现 ， 固 定 定位 元 素 不 随 着 页 面 滚动 而 移动 
固定 定位 并 不 常用 ， 最 常见 的 情况 是 用 它 创 建 不 随 页 面 滚动 而 移动 的 导航 元 素 。 





好 了 ， 既 然 你 已 经 理解 了 4 个 定位 属性 ， 那 接 下 来 我 们 好 好 讲 一 讲 定位 上 下 文 吧 。 


3.4.5 EFX 


把 元 素 的 position 属性 设 定 为 relative, absolute 或 fixed 后 ,继而 可 以 使 用 top. 
right, bottom 和 left 属性 ， 相 对 于 另 一 个 元 素 移 动 该 元 素 的 位 置 。 这 里 的 “ 另 一 
个 元 素 " ， 就 是 该 元 素 的 定位 上 下 文 。 

在 讲 绝对 定位 的 时 候 ， 我 们 知道 绝对 定位 元 素 默认 的 定位 上 下 文 是 body。 这 是 因为 
body 是 标记 中 所 有 元 素 唯一 的 祖先 元 素 。 而 实际 上 , 绝对 定位 元 素 的 任何 祖先 元 素 都 
可 以 成 为 它 的 定位 上 下 文 , 只 要 你 把 相应 祖先 元 素 的 position 设 定 为 relative 即 可 。 


比如 下 面 的 标记 
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<body> 
«div id-"outer"» 
«div id-"inner"»This is text..«/div» 
</div> 
</body> 
i ] : " ! bu ivi PLA ge 
SED 请 注意 ， 对 HTML 中 的 文本 应 该 使 用 恰当 的 语义 标签 来 标记 。 我 们 这 里 为 了 说 明 问 
题 的 需要 ， 才 把 文本 直接 放 在 了 没有 语义 的 div 中 。 


搭配 下 面 的 CSS 


div#outer (width:250px; margin:50px 40px; border-top:3px solid red;} 
divitinner [top:10px; left:20px; background:itccc;] 


结果 如 图 3-28 所 示 。 


看 到 代码 里 给 内 部 div 设 定 了 top 和 left 属性 , 你 是 不 是 觉得 图 3-28 有 问题 一 一 为 
什么 内 部 div 没有 相对 外 部 div 向 下 移动 10 像素 , 向 右 移动 20 像素 呢 ? 为 什么 它们 
俩 的 原点 (左上 角 点 ) 还 一 样 呢 ?原因 在 于 ， 内 外 部 div 默认 都 是 静态 定位 ， 它 们 
之 间 不 存在 谁 是 谁 的 定位 上 下 文 这 个 问题 。 换 句 话 说 ， 在 和 常 规 文档 流 中 ， 由 于 外 部 
div 没有 内 容 ， 内 部 div 就 会 跟 它 共享 相同 的 起 点 。 只 有 将 元 素 的 position 属性 设 
定 为 relative, absolute 或 fixed， 这 个 元 素 的 top, right, bottom 和 left 属性 才 
会 起 作用 。 下 面 我 们 就 把 内 部 div 设 定 为 绝对 定位 ,来 看 一 看 有 什么 变化 发 生 。 


eno Positioning Context 


Lr A e Ka p 











This is text for a paragraph to 
demonstrate contextual 
positioning. Here are two divs, one 
nested in the other. The outer div 
has a red top border and the inner 
div has a gray background. Both 
elements have default static 
positioning. 





图 3-28 jXS;EPST EXERGE— HEB div。 我 们 给 外 部 div 的 上 方 加 了 边框 ， 给 内 部 div 加 了 
背景 。 由 于 内 部 div (默认 ) 是 静态 定位 的 ， 因 此 top 和 left 属性 不 起 作用 
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divitouter {width:250px; margin:50px 40px; border-top:3px solid red;} 
divitinner [position:absolute; top:10px; left:20px; background:iccc;] 

对 了 ， 绝 对 定位 相对 于 谁 呀 ?由 于 没有 相对 定位 的 祖先 元 素 供 其 参照 ， 内 部 div 只 
能 以 默认 的 定位 上 下 文 body 作为 参照 ， 相 对 于 它 定位 。 此 时 ， 内 部 div 完全 无 视 其 
父 元 素 ( 外 部 div) 的 存在 ，top 和 left 属性 会 相对 于 body 元 素 向 下 、 向 左 偏 移 其 
位 置 ， 结 果 如 图 3-29 所 示 。 








eno Positioning Context 
[a |> | [e] fle:///Users/Beth/Documen: © (Qr Goose — ) 











This is text for a paragraph to demonstrate contextual 
positioning. Here are two divs, one nested in the other. 
The inner div now has absolute positioning, so it positions 
itself relative to the default positioning context, body. 





3-29 虽然 有 背景 的 内 部 div 在 标记 中 位 于 外 部 div( 看 那个 边框 ) 之 中 ， 但 由 于 不 存在 相对 
定位 的 其 他 祖先 元 素 可 以 作为 定位 上 下 文 ， 绝 对 定位 的 内 部 div 只 能 相对 于 body 元 素 
进行 定位 

事实 上 ， 只 要 把 元 素 的 外 边 距 和 内 边 距 设 定好 ， 多 数 情况 下 只 用 静态 定位 就 足以 实 

现 页 面 布局 了 。 很 多 刚 开始 接触 CSS 的 初学 者 都 会 错误 地 设 定 position 属性 ， 最 终 

才 发 现 从 文档 流 中 挪 出 来 的 这 些 元 素 一 点 也 不 好 控制 。 因 此 ， 除 非 真 需要 那么 做 ， 

否则 不 要 轻易 修改 元 素 默 认 的 position 属性 。 


如 果 我 现在 把 外 部 div 的 position 属性 设 定 为 relative: 


divitouter [position:relative; width:250px; margin:50px 40px; border-top:3px 
solid red;) 
divitinner [position:absolute; top:10px; left:20px; background:iccc;] 


这 样 ， 绝 对 定位 的 内 部 div 的 定位 上 下 文 就 变 成 了 外 部 div， 结 果 如 图 3-30 所 示 。 
此 时 内 部 div 的 top 和 left 属性 参照 的 就 是 外 部 div 了 。 如 果 你 再 用 left 和 top 属 


性 重新 定位 外 部 div， 内 部 div 也 会 跟着 移动 相同 的 距离 ， 以 保证 它 与 外 部 div (也 
就 是 它 的 定位 上 下 文 ) 之 间 的 位 置 关系 。 
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eoo Positioning Context 
nmn Je ] 














This is text for a paragraph to 
demonstrate contextual 
positioning. Here are two divs, 
one nested in the other. The 
outer div has a red top border 
and the inner div has a gray 
background. The inner div has 
absolute positioning, and the 
outer div, with relative 
positioning, now becomes its 
positioning context: the inner div 
now positions itself relative to 
the outer div. 





图 3-30 外 部 div 改 为 相对 定位 之 后 ， 其 后 代 中 绝对 定位 的 元 素 就 会 按照 top 和 left 属性 的 
设 定 ， 相 对 于 外 部 div 定位 


显示 属性 


正如 所 有 元 素 都 有 position 属性 ,所 有 元 素 也 都 有 display 属性 。 尽 管 display 属 
性 的 值 有 很 多 ， 但 大 多 数 元 素 display 属性 的 默认 值 不 是 block， 就 是 inline. # 
是 你 在 我 们 讲 第 1 章 的 时 候 睡 着 了 , 我 单独 给 你 讲 一 讲 块 级 元 素 与 行内 元 素 的 区 别 。 


口 块 级 元 素 ， 比 如 段落 、 标 题 、 列 表 等 ， 在 浏览 器 中 上 下 堆 琶 显示 。 
O 行内 元 素 ， 比 如 a、span 和 img， 在 浏览 噩 中 左右 并 排 显 示 ， 只 有 前 一 行 没有 空间 
时 才 会 显示 到 下 一 行 。 


把 块 级 元 素 变 成 行内 元 素 〈 或 者 相反 ) 的 魔法 如 下 。 


/# 默 认为 block*/ 

p (display:inline;] 

/* 默 认为 inline*/ 

a {display:block;} 

这 种 转换 可 以 让 原先 的 行内 元 素 填 满 其 父 元 素 。 本 书后 面 在 介绍 到 CSS 下 拉 菜 单 的 
时 候 ， 就 会 用 到 这 个 技巧 。 





display 属性 还 有 一 个 值 有 必要 提 一 下 , 就 是 none。 把 元 素 的 display 设 定 为 none， 
该 元 素 及 所 有 包含 在 其 中 的 元 素 ， 都 不 会 在 页 面 中 显示 。 它 们 原先 占据 的 所 有 空间 
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也 都 会 被 “回收 ”>， 就 好 像 相关 的 标记 根本 不 存在 一 样 。 与 此 相对 的 是 visibility 
属性 ， 这 个 属性 最 常用 的 两 个 相对 的 值 是 visible (默认 值 ) 和 hidden。 把 元 素 的 
visibility 设 定 为 hidden， 元素 会 隐藏 ， 但 它 占据 的 页 面 空间 仍然 “虚位以待 ”。 





育 景 
本 章 的 主题 是 定位 元 素 ， 关 于 定位 元 素 ， 最 后 要 讲 的 一 个 主题 是 背景 。 背 景 支持 为 
元 素 添加 背景 颜色 和 背景 图 片 。 要 是 你 使 用 过 Adobe Photoshop 或 Adobe Fireworks 
的 话 ， 一 定 知道 图 层 这 个 概念 。CSS 里 也 一 样 ， 每 个 元 素 盒 子 都 可 以 想象 成 由 两 个 
图 层 组 成 。 元 素 的 前 景 层 包 含 内 容 ( 如 文本 或 图 片 ) 和 边框 ， 元 素 的 背景 层 可 以 用 
实 色 填充 (使 用 background-color 属性 )， 也 可 以 包含 任意 多 个 背景 图 片 (使 用 
background-image 属性 )， 背 景 图 片 著 加 在 背景 颜色 之 上 。 





在 CSS3 被 浏览 器 实现 之 前 ,只 能 在 背景 闫 色 上 添加 一 张 背 景 图 片 。 而 现在 , 我 们 可 
以 为 背景 图 层 添加 多 张 图 片 ( 以 及 CSS3 渐变 )。 为 了 让 大 家 对 元 素 盒子 的 图 层 有 更 
直观 的 认识 ,下面 我 们 把 本 章 开头 的 盒 模 型 示意 图 改 成 三 维 透视 图 , 如 图 3-31 所 示 。 





人 + 一 一 背景 颜色 




















这 是 前 景 层 。 其 中 包括 内 
容 和 边框 。 内 边 距 设 定 内 
容 与 边框 的 距离 。 外 边 距 


。 其 中 包括 内 
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图 3-31 这 个 盒 模型 示意 图 展示 了 元 素 的 前 景 和 青 景 层 
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3.6.1 《CSS 背景 属性 


CSS 规定 以 下 与 背景 相关 属性 





口 background-color 

口 background-image 

口 background-repeat 

口 background-position 

口 background-size 

口 background-attachment 

口 background ( 简写 属性 ) 

口 background-clip, background-origin, background-break ( 目前 尚未 得 到 广泛 支持 ) 





些 属性 可 以 让 我 们 控制 背景 图 层 的 方方面面 。 下 面 我 们 就 来 一 个 一 个 地 讲解 。 





3.6.2 ”背景 颜色 


background-color 是 背景 属性 中 最 简单 的 ， 通 过 它 可 以 设 定 元 素 的 颜色 。 然 后 ,元 
素 就 会 以 设 定 的 颜色 填充 背景 图 层 ， 如 图 3-32 所 示 。 


body {background-color:#caebff;} 
p U*&-T BEA 
font-family:helvetica, arial, sans-serif; font-size:18px; 
width:350px; margin:20px auto; padding:10px; 
/* 这 个 例子 中 讨论 背景 和 前 景 样式 */ 
background-color:#fff; color:#666; border:4px solid; 


eoo Background Color 
Eee D 








This text and the border are part of the element's 
foreground layer. The background color of the element 


is white. The background color of body is blue 


图 3-32 body 的 background-color 是 蓝 绿 色 ， 段落 的 background-color 是 白色 ， 前 景色 
color 是 灰色 ， 前 景色 既 影 响 文 本 ， 也 影响 边框 
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这 个 例子 除了 演示 怎么 给 元 素 添 加 背景 色 ， 还 演示 了 前 景色 的 作用 范围 ， 也 就 是 前 
景色 会 影响 元 素 的 内 容 和 边框 。 当 然 ， 有 一 个 前 提 条 件 ， 就 是 在 使 用 border 设 定 边 
框 的 样式 和 宽度 ， 而 没有 设 定 边框 颜色 (或 者 没有 使 用 border-color 单独 设 定 边框 
颜色 ) 的 情况 下 ， 边 框 会 使 用 color 属性 设 定 的 字体 颜色 。 默 认 颜 色 是 黑色 。 如 果 
你 想 让 边框 的 颜色 有 别 于 文本 ， 就 需要 单独 设 定 。 


3.6.3 ”背景 图 片 


图 3-33 是 一 张 包含 圆 形 图 案 的 图 片 ， 本 节 我 们 就 它 来 示范 background-image 和 
background-repeat 属性 。 





图 3-33 ”为 包含 圆 形 图 案 的 图 片 添 加 了 边框 ， 圆 形 四 周 有 空 白 


接 下 来 ， 我 们 通过 background-image 属性 把 这 张 包含 圆 形 图 案 的 图 片 放 到 元 素 的 背 
景 屋 上 ， 结 果 如 图 3-34 所 示 。 





eoo Background Image 


[3[» JL] ca- ) 








Background images tile across and down from the top 


left corner. 





图 3-34 ”上 比 元 素 小 的 背景 图 片 会 在 水 平和 垂直 方向 上 重复 出 现 ， 直 至 填 满 整个 背景 空间 
pt 


font-size:28px; 

font-family:helvetica, arial, sans-serif; 
width:345px; 

height:110px; 

margin:20px auto; 

padding:10px; 

color:#000; 

border:4px solid #aaa; 
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background-color:#fff; 

background-image:url(images/blue circle.png);) 
由 此 可 见 ， 默 认 情 况 下 背景 图 片 会 以 元 素 左 上 角 为 起 点 ， 沿 水 平和 垂直 方向 重复 出 
现 ， 最 终 填 满 整 个 背景 区 域 。 正 是 因为 以 元 素 左 上 角 为 原点 ， 所 以 元 素 盒 子 底部 和 
右 侧 的 圆 形 图 案 都 只 显示 了 一 部 分 。 要 注意 的 是 , 指定 背景 图 片 来 源 的 方式 , 与 img 
标签 中 的 方式 不 同 ， 要 这 样 : 


background-image:url( 图 片 路 径 / 图 片 文件 名 ) 
图 片 地 址 两 边 不 用 加 引号 ， 当 然 加 了 也 没 问题 。 


要 改变 默认 的 水 平和 垂直 重复 效果 , 可 以 修改 background-repeat 属性 ; 要 改变 背景 
图 片 的 起 点 ， 可 以 修改 background-position 属性 。 


3.6.4 ”背景 重复 


控制 背景 重复 方式 的 background-repeat 属性 有 4 个 值 。 默 认 值 就 是 repeat, 效果 就 
是 图 3-34 中 所 示 的 水 平和 垂直 方向 都 重复 ， 直 至 填 满 元 素 的 背景 区 域 为 止 。 男 外 3 
个 值 分 别 是 只 在 水 平方 向 重复 的 repeat-x、 只 在 垂直 方向 上 重复 的 repeat-y 和 在 任 
何方 向 上 都 不 重复 ( 或 者 说 只 让 背景 图 片 显示 一 次 ) 的 no-repeat 。 这 几 个 值 的 效果 
如 图 3-35 所 示 。 











eoo Background Repeat 


EIE cha- 5 











background-repeat:repeat 
The image tiles across and down the background 
area. 


background-repeat:repeat-x 
The image tiles across the background area. 





background-repeat:repeat-y 
The image tiles down the background area. 


background-repeat:no-repeat 
The image displays once only. 





图 3-35 4 个 不 同 background-repeat 值 的 效果 
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这 几 种 重复 方式 的 用 法 有 很 多 种 。 比 如 ，repeat-x 和 repeat-y 可 以 用 来 实现 装饰 性 
的 边框 效果 ,而 no-repeat 则 控制 背景 图 片上 只 出 现 一 次 。 除 了 背景 图 片 、 背 景 重复 之 
外 ， 另 一 个 相关 的 控制 选项 是 background-position， 我 们 放 在 下 一 市 介绍 。 








在 此 之 前 先 提 醒 大 家 一 句 ，CSS3 还 规定 另外 两 个 值 (但 尚未 得 到 浏览 器 支 持 )， 以 
控制 背景 图 片 重复 确切 的 次 数 ， 即 所 有 图 片 都 是 完整 的 ， 不 会 出 现 半 张 图 片 的 现象 。 


Q background-repeat:round: 为 确保 图 片 不 被 剪 切 ， 通 过 调整 图 片 大 小 来 适应 背景 
区 域 。 
a ida repeat:space， 为 确保 图 片 不 被 剪 切 ， 通 过 在 图 片 间 添 加 空白 来 适 





N 








3.6.5 ”背景 位 置 


N 


ey» 








用 于 控制 背景 位 置 的 background-position 属性 ， 是 所 有 背景 属性 中 最 复杂 的 
background-position 属 性 有 5 个 关键 字 值 ,分 别 是 top left bottom right 和 center, 
这 些 关 键 字 中 的 任意 两 个 组 合 起 来 都 可 以 作为 该 属性 的 值 。 比 如 ，top right 表示 把 
图 片 放 在 元 素 的 右上 角 位 置 ，center center 把 图 片 放 在 元 素 的 中 心 位 置 。 事 实 上 ， 
这 都 是 很 含糊 的 说 法 ， 下 面 我 们 就 来 详细 解释 。 

千 万 要 注意 ，background-position 属性 同时 设 定 元 素 和 图 片 的 原点 。 原 点 决定 了 元 
素 和 图 片 中 某 一 点 的 水 平和 垂直 坐标 。 默 认 情 况 下 ，background-position 的 原点 位 
于 左上 角 。 换 名 话说， 元 素 的 左上 角 和 图 片 的 左上 角 是 对 齐 的 ， 随 后 图 片 向 各 个 方 
向 重复 ， 都 是 以 左上 角 为 起 点 。 图 3-35 中 所 示 就 是 默认 以 左上 角 为 原点 的 情形 。 














有 了 这 个 基本 共识 之 后 ， 下 面 我 们 就 在 实践 中 学 习 background-position 属性 ， 仍 以 
图 3-35 中 的 第 一 种 情况 为 例 。 第 一 情况 下 ，background-position 属性 的 默认 值 top 
left 控制 着 水 平和 垂直 方向 重复 的 起 点 。 那 我 们 看 一 看 ， 把 起 点 位 置 改 为 center 
center 之 后 会 有 什么 不 一 样 (结果 参见 网 3-36 )。 





/*center center 的 简化 写法 */ 
p#center {background-position:center;} 


只 给 background-position 设 定 一 个 关键 字 值 ， 则 另 一 个 也 会 取 相 同 的 值 ( 比如 这 里 
就 相当 于 写 了 background-position:center cetner )。 
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eoo Background Position 


(ale) En e Vo ) 





background-position:left top 
The image tiles across and down from the top left 
(default setting). 


background-repeat:center center 
The image tiles out from the center of the element. 





图 3-36 background-position:center center 设 定 图 片 中 心 点 与 元 素 中 心 点 重合 ， 然 后 再 


向 各 个 方向 重复 
比较 修改 前 后 的 结果 会 发 现 ， 第 二 段 中 的 背景 图 片 是 以 段落 的 中 心 点 为 起 点 ， 然 后 
再 向 水 平和 垂直 方向 重复 。 


好 了 ， 换 一 种 思路 。 这 次 我 们 用 百分比 来 设 定位 置 ， 结 果 如 图 3-37 所 示 。 


div { 
height:150px; 
width:250px; 
border:2px solid #aaa; 
margin:20px auto; 
background-image:url(images/turq spiral 150.png); 
background-repeat:no-repeat; 
background-position:5076 5076; 


eoo Background Position 


EE ES «fa ) 








A centered background image! 





E 3-37 使 用 background-position 把 青 景 图 片 居 中 
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ze» RALAA DEAE: “为 什么 文本 也 跟着 垂直 居中 了 呢 ? ”哈哈 ， 这 是 因为 我 把 

line-height 设 定 成 了 元 素 的 高 度 ， 而 行 高 是 在 文本 行 上 下 平均 分 配 的 。 此 外 ， 我 还 
把 text-align 设 定 为 center， 把 文本 水 平 居中 。 这 样 就 让 文本 跟 背 景 图 片 一 样 ， 在 
两 个 方向 上 都 居中 了 。 


通过 把 background-position 设 定 为 50% 50%, łE background-repeat 设 定 为 no-Tepeat， 
实现 了 图 片 在 背景 区 域内 居中 的 效果 。 


背景 位 置 的 值 
设 定 背 景 位 置 时 可 以 使 用 三 种 值 : 关键 字 、 百 分 比 、 绝 对 或 相对 单位 的 数值 。 可 以 使 用 两 个 值 
分 别 设 定 水 平和 垂直 位 置 。 


关键 字 指 的 顺序 不 重要 ，1left bottom 和 bottom left 意思 相同 。 为 了 设 定 的 值 在 所 有 浏览 器 
中 都 有 效 ， 最 好 不 要 混用 关键 字 值 与 数字 值 。 


使 用 数值 ( 比如 40% 30%) 时 ， 第 一 个 值 表示 水 平 位置 ， 第 二 个 值 表示 垂直 位 置 。 要 是 只 设 定 
一 个 值 ， 则 将 其 用 来 设 定 水 平 位 置 ， 而 垂直 位 置 会 被 设 为 center。 


在 使 用 关键 字 和 百分比 值 的 情况 下 ， 设 定 的 值 同时 应 用 于 元 素 和 图 片 。 换 名 话说 ， 如 果 设 定 了 
3396 33%， 则 图 片 水 平 33% 的 位 置 与 元 素 水 平 33% 的 位 置 对 齐 。 垂 直方 面 也 一 样 。 图 3-37 所 
示 也 是 一 个 例子 ， 那 是 通过 center center 把 图 片 的 中 心 点 定位 在 了 元 素 的 中 心 点 。 


像素 之 类 的 绝对 单位 数值 就 不 一 样 了 。 要 是 用 像素 单位 来 设 定位 置 , 那么 图 片 的 左上 和 角 会 被 放 
在 距离 元 素 左上 角 指 定位 置 的 地 方 。 


有 意思 的 是 , 还 可 以 使 用 负 值 。 这 样 就 可 以 把 图 片 的 左上 和 角 定位 到 元 素 外 部 ， 从 而 在 元 素 中 只 
能 看 到 部 分 图 片 。 当 然 ， 给 图 片 设 定 足 够 大 的 正 值 ， 也 可 以 把 图 片 的 右 下 角 推 到 元 素 外 部 ， 从 
而 在 元 素 中 也 只 能 看 到 部 分 图 片 。 位 于 元 素 外 部 的 那 部 分 图 片 不 会 显示 。 


3.6.6 ”背景 尺寸 


background-size 是 CSS3 规定 的 属性 ， 但 却 得 到 了 浏览 器 很 好 的 支持 。 这 个 属性 用 
来 控制 背景 图 片 的 尺寸 ， 可 以 给 它 设 定 的 值 及 含义 如 下 。 


口 50%: 缩放 图 片 ， 使 其 填充 背景 区 的 一 半 。 
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口 100px 50px: 把 图 片 调整 到 100 像素 宽 ，50 像素 高 。 
O cover: 拉 大 图 片 ， 使 其 完全 填 满 背景 区 ; 保持 宽 高 比 
O contain: 缩放 图 片 ， 使 其 恰好 适合 背景 区 ; 保持 宽 高 比 


仍然 使 用 图 3-37 居中 背景 图 片 的 CSS 规则 ,但 把 图 片 换 一 换 ， 再 分 别 设 定 上 面 列 出 
的 background-size 属性 的 几 个 值 ， 会 得 到 图 3-38 所 示 的 效果 。 





eoo Background Size 


[|] xl e | (a- P 











background-size:50$ 
The image fills 5096 of the element. 


background-size:100px 50px 
The image is sized to the specified dimensions. 


background-size:cover 
The image is enlarged to fill the element. 


background-size:contain 
The image is sized to fit inside the element. 





图 3-38 ”给 一 个 居中 的 不 重复 的 背景 图 片 应 用 不 同 的 background-size 值 的 效果 


文 个 新 属性 为 我 们 控制 背景 图 片 提供 了 更 多 可 能 性 。 使 用 这 个 属性 需要 注意 ， 别 把 
本 来 很 小 的 图 片 拉 得 大 大 ， 那 样 会 导致 图 片 质量 失真 。 





3.6.7 ”背景 粘 附 
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background-attachment 属性 控制 滚动 元 素 内 的 背景 图 片 是 否 随 元 素 滚动 而 移动 。 这 
个 属性 的 默认 值 是 scrol1， 即 背景 图 片 随 元 素 移动 。 如 果 把 它 的 值 改 为 人 ixed, 那么 
背景 图 片 不 会 随 元 素 滚动 而 移动 。 


background-attachment: fixed 最 常用 于 给 body 元 素 中 心 位 置 添加 淡色 水 印 , 让 水 印 
不 随 页 面 滚动 而 移动 。 


实现 这 种 效果 的 CSS 规则 如 下 。 


body ( 
background-image:url(images/watermark.png); 
background-position:center; 
background-color:itfff; 
background-repeat:no-repeat; 
background-size:contain; 
background-attachment: fixed; 


} 


没 错 ， 关 于 背景 图 片 的 规则 写 起 来 有 点 费劲 ， 因 为 属性 名 太 长 了 。 别 担心 ， 使 用 简 
写 属 性 background 就 可 以 在 一 条 声明 里 设置 所 有 值 。 


3.6.8 ”简写 背景 属性 





background 属性 可 以 用 来 设 定 所 有 背景 相关 的 值 。 比 如 ， 前 面 那个 background- 
attachment 的 例子 使 用 简写 的 background 属性 ， 可 以 写成 这 样 一 条 规则 : 
body (background:url(images/watermark.png) center #fff no-repeat contain fixed;] 


声明 中 少 写 了 哪个 属性 的 值 (比如 没 写 no-repeat )， 就 会 使 用 相应 属性 的 默认 值 
( repeat )。 


3.6.9 ”其 他 CSs3 背景 属性 


ey 


CSS3 又 新 增 了 一 些 新 的 背景 属性 ， 这 里 来 简单 介绍 一 下 。 不 过 ， 这 些 属 性 受 支 持 的 
程度 并 不 一 致 ， 如 果 你 想 使 用 它们 ， 别 忘 了 测试 自己 的 页 面 在 这 些 属 性 不 可 用 时 会 
出 什么 问题 。 要 不 ， 就 使 用 Modernizr 来 检测 浏览 器 对 它们 的 文 持 情况 ， 并 为 不 支持 
它们 的 浏览 器 提供 蔡 代 CSS. 














Modernizr 是 一 个 JavaScript 库 ,用 于 检测 用 户 浏览 器 支持 哪些 HTML5 和 CSS3 功能 。 
更 多 信息 ， 请 参考 这 个 网 址 : http://modernizr.com。 





口 background-clip。 控 制 青 景 绘制 区 域 的 范围 ， 比 如 可 以 让 背景 颜色 和 背景 图 片 只 
出 现在 内 容 区 ， 而 不 出 现在 内 边 距 区 域 。 默 认 情 况 下 ， 背 景 绘 制 区 域 是 扩展 到 边 
框 外 边界 的 。 
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口 background-origin。 控 制 背 景 定位 区 域 的 原点 ， 可 以 设 定 为 元 素 盒子 左上 角 以 外 
的 位 置 。 比 如 ， 可 以 设 定 以 内 容 区 左上 角 作 为 原点 。 
口 background-break。 控制 分 离 元 素 ( 比如 跨越 多 行 的 行内 盒子 ) 的 显示 效果 。 














d» 有 关 这 些 新 属性 的 更 多 信息 ， 请 参考 : http//www.w3.org/TR/css3-background. 


3.6.10 ”多 背景 图 片 


CSS3 还 可 以 给 元 素 背 景 添 加 多 个 背景 图 片 ， 下 面 我 们 就 使 用 简写 属性 background 
来 说 明 ， 效 果 见 图 3-39。 


p { 
height:150px; 
width:348px; 
border:2px solid #aaa; 


margin:20px auto; 
font:24px/150px helvetica, arial, sansserif; 


text-align:center; 

background: 

url(images/turq_spiral.png) 30px -10px no-repeat, 
url(images/pink_spiral.png) 145px Opx no-repeat, 
url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75; 





} 
eoo Multiple Background Images 
Lo eA e ja 











Multiple back und ges! 


\ 





图 3-39 ”多 张 图 片 可 以 在 背 景 中 仪 加 起 来 ，CSS 规则 中 先 列 出 的 图 片 在 上 层 
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hl 


在 CSS 中 ,我 把 每 张 图 片 的 声明 都 单独 放 在 了 一 行 里 ， 以 逗号 分 隔 ， 以 便 看 清 它们 
的 位 置 、 重 复 的 设 定 值 。 为 了 防止 图 片 加 载 失 败 时 元 素 背 景 处 于 默认 的 透明 状态 ， 
这 里 也 在 最 后 一 条 声明 中 加 上 了 背景 颜色 〈 加 粗 的 值 )。 要 注意 的 是 ,代码 中 先 列 出 
的 图 片 显 示 在 上 方 ， 或 者 说 ， 更 接近 前 景 。 





BLUE: 


为 鼓励 浏览 器 厂商 尽早 采用 W3C 的 CSS3 推荐 标准 ,于 是 就 产生 了 VSP(Vendor Specific Prefixes , 
ARR) 的 概念 。 


有 了 这 些 CSS 属性 的 前 级 ， 厂 商 就 可 以 尝试 实现 W3C 涵盖 新 CSS 属性 的 工作 草案 。 在 迅速 实 
现 新 属性 的 同时 ， 还 可 以 声明 它们 是 过 渡 的 、 部 分 实现 的 ， 或 者 实验 性 的 。 总 之 ， 后 果 由 使 用 
者 自负 。 


就 拿 W3C 推荐 的 transform 属性 为 例 ， 标 准 语法 是 这 样 的 : 


transform: skewX(-45deg); 


然而 , 由 于 这 个 属性 还 没有 完全 定案 , 为 保证 在 大 多 数 浏览 器 以 及 它们 的 实验 性 实现 中 能 够 使 
用 这 个 属性 ， 应 该 针对 想 要 支持 的 浏览 器 为 该 属性 添加 VSP。 每 个 浏览 器 只 使 用 各 自 能 理解 的 
属性 声明 。 

-moz-transform:skewX(-45deg); /* Firefox */ 

-Wwebkit-transform:skewX(-45deg); /* Chrome X Safari */ 
-ms-transform:skewX(-45deg); /* 微软 Internet Explorer */ 


-o-transform:skewX(-45deg) ; /* Opera */ 
transform: skewX(-45deg) ; /# 最 后 是 W3C 标准 属性 */ 


VSP 的 开头 是 一 个 连 字符 ， 然 后 是 前 缀 名 ， 接 着 又 是 一 个 连 字符 ， 最 后 是 W3C 属性 名 。 另 外 
要 特别 注意 ， 在 带 前 缀 的 属性 声明 之 后 还 要 声明 W3C 标准 属性 ， 以 备 将 来 有 浏览 器 实现 完整 
的 不 带 前 缀 的 属性 时 派 上 用 场 。 这 里 的 Safari 和 Chrome 都 使 用 相同 的 -webkit- 前 缀 , 是 因为 
它们 都 使 用 Webkit 泻 染 引擎 。 


以 下 CSS3 属性 必须 加 VPS : 


border-image translate 
linear-gradient transition 
radial-gradient background " 
transform background-image 
transform-origin 


* 针对 背景 图 片 或 渐变 
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为 了 节省 篇 幅 , 我 不 会 在 每 个 例子 中 都 写 全 一 套 带 VPS 的 属性 声明 , 而 只 会 提醒 大 家 VPS 是 必 
要 的 。 随 着 浏览 器 的 不 断 更 新 ， 有 朝 一 日 ，VPS 可 能 就 用 不 着 了 。 有 关 CSS3 和 VPS 的 最 新 信 
息 ， 可 以 参考 这 个 网 站 : is /caniuse.com。 如 果 想 实现 自动 添加 VPS， 可 以 使 用 -prefix-free 





3.6.11 背景 渐变 
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渐变 就 是 在 一 定 长 度 内 两 种 或 多 种 颜色 之 间 自 然 的 过 渡 。CSS3 之 前 ,必须 依赖 Adobe 
Photoshop 等 图 形 处 理 软件 来 制作 渐变 图 ， 再 以 背景 图 片 方式 添加 给 元 素 。 而 现在 ， 
使 用 CSS 就 可 以 创造 出 各 种 渐变 效果 了 。 








渐变 是 CSS 帮 有 我 们 生成 的 背景 图 片 。 添 加 渐变 可 以 使 用 background-image 属性 ， 也 
可 以 像 后 面 例子 中 一 样 使 用 简写 background 属性 。 


渐变 分 两 种 ， 一 种 线性 渐变 ， 一 种 放射 性 渐变 。 线 性 渐变 从 元 素 的 一 端 延 伸 到 男 一 
端 ， 放 射 性 渐变 则 从 元 素 内 一 点 向 四 周 发 散 。 


下 面 来 看 一 个 简单 的 线性 渐变 的 例子 ，HTML 标记 如 下 。 

















«div class-'gradient1'»«/div» 
«div class-'gradient2'»«/div» 
«div class-'gradient3'»«/div» 


CSS 规则 如 下 。 


/* 为 元 素 金 子 添加 样式 */ 

div { 
height:150px; 
width:200px; 
border:1px solid #ccc; 
float:left; 
margin:16px; 

} 

/* 例 1: 默认 为 从 上 到 下 */ 

.gradient1 { 
background:1linear-gradient(#e86a43, #fff); 

} 

/* 例 2: 从 左 到 右 */ 


.gradient2 ( 
background:linear-gradient(left, #64d1dd, ifff); 


} 
/* 例 3: 左上 到 右 下 */ 
.gradient3 { 

background:linear-gradient(-45deg, #e86a43, #fff); 
} 
图 3-40 展示 了 三 种 简单 的 渐变 效果 。 例 1 声明 了 一 种 开始 属性 和 一 种 结束 颜色 ， 这 
两 种 颜色 会 按照 默认 的 方向 《从 下 到 下 ) 实现 平滑 过 渡 。 例 2 起 点 关键 字 left, T 
是 渐变 方向 变 成 了 从 左 到 另 一 端 。 例 3 声明 了 -45deg (deg 是 “ 度 ”)， 等 于 把 起 点 从 
默认 的 中 上 设 定 到 了 左上 。 


——— F 





图 3-40 三 种 简单 的 渐变 效果 

1. 渐变 点 

渐变 点 就 是 渐变 方向 上 的 点 ， 可 以 在 这 些 点 上 设 定 颜色 和 不 透明 度 。 通 过 设 定 下 一 
个 渐变 点 的 颜色 值 ， 就 可 以 控制 渐变 的 效果 。 可 以 添加 任意 多 个 渐变 点 。 渐 变 点 的 
位 置 一 般 使 用 整个 渐变 宽度 的 百分比 来 表示 。 图 3-41 展示 了 使 用 渐变 点 后 的 四 种 渐 








/* 例 1: 50% 处 有 一 个 渐变 点 */ 
.gradient1 { 
background:linear-gradient(#64d1idd, #fff 50%, #64d1dd); 
} 
/* 例 2: 20% 和 80% 处 有 两 个 渐变 点 */ 
.gradient2 { 
background:linear-gradient(ite86a43 20%, #fff 50%, #e86a43 80%); 
} 
/* 例 3: 25%、50%、75% 处 有 三 个 渐变 点 */ 
.gradient3 ( 
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background:linear-gradient(it64didd, #fff 2526, #64d1idd 50%, #fff 75%, 
#64d1dd); 
} 
/* 例 4: 为 同一 个 渐变 点 设 定 两 种 颜色 可 以 得 到 突变 效果 *#/ 
.gradient4 ( 

background:linear-gradient(ite86a43, itfff 2526, #64d1dd 25%, #64d1dd 75%, 
fff 7596, 4686243); 
} 


m: 
1 BEEN s anm 


图 3-41 带 渐变 点 的 渐变 效果 

图 3-41 中 的 例 1 在 $0% 处 包含 一 个 渐变 点 ， 因 此 渐变 效果 是 从 开始 颜色 到 渐变 点 颜 
色 (白色 ), 然后 再 从 渐变 点 颜色 到 结束 颜色 。 注意 , 开始 和 结束 位 置 如 果 没 有 声明 , 
则 默认 为 0% 和 100%。 


如 果 不 是 使 用 百分比 或 其 他 值 声 明 渐 变 点 的 位 置 ， 则 三 种 颜色 会 均匀 分 布 于 整个 渐 
变 ， 其 实际 位 置 是 0%、50% 和 10096. 


例 2 演示 了 起 点 和 终点 不 是 0% 和 100% 时 的 情形 。 此 时 ， 在 第 一 个 渐变 点 (2096) 
之 前 ， 是 第 一 个 渐变 点 声明 的 实 色 ， 而 在 该 点 之 后 ， 则 是 从 该 颜色 到 下 一 个 渐变 点 
颜色 的 过 渡 。 同 样 ,在 最 后 一 个 渐变 点 ( 80% ) 之 后 ， 该 渐变 点 的 颜色 会 以 实 色 扩展 
到 元 素 结束 。 

例 3 简单 展示 了 相同 颜色 在 几 个 渐变 点 之 间 变 来 变 去 的 效果 。 例 4 展示 了 在 同一 个 
渐变 点 声明 两 种 不 同 的 颜色 ， 能 实现 一 种 突变 的 效果 。 

2. 放射 性 渐变 

放射 性 渐变 比 线性 渐变 复杂 那么 一 点 点 ， 因 为 可 用 的 控制 点 多 一 些 。 如 果 你 写 过 程 
序 ， 从 属性 值 中 的 括号 就 可 以 看 出 ， 渐 变 属 性 其 实 是 函数 。 什 么 是 函数 ? 函数 可 以 
接收 参数 ， 然 后 根据 这 些 参 数 来 生成 渐变 。 在 创建 放射 性 渐变 时 ， 可 以 使 用 参数 指 
定形 状 、 位 置 、 尺 寸 、 颜 色 和 不 透明 度 。 
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下 面 的 每 一 个 例子 都 设 定 3 种 颜色 。 


.gradient1 { 
background: -webkit-radial-gradient(#fff, #64didd, #70aa25); 


} 


.gradient2 { 
background: -webkit-radial-gradient(circle, #fff, #64d1idd, #e86a43); 


} 
.gradient3 { 
background: -webkit-radial-gradient(50px 30px, circle, #fff, it64d1dd, 
#4947ba); 
} 


这 里 虽然 只 声明 了 -webkit- 前 级 ， 但 带 有 其 他 厂商 前 级 的 属性 也 是 必要 的 。 


在 图 3-42 F, 4 1 展示 了 默认 的 渐变 形状 ， 即 渐变 效果 会 填充 元 素 ， 这 里 的 元 素 是 
和 矩形。 如 果 元 素 是 正方 形 ， 那 渐变 就 是 圆 形 。 


i CA a 


图 3-42 三 个 三 色 放射 性 渐变 。 第 一 个 是 默认 的 填 满 图 形 渐变 ， 第 二 个 是 圆 形 渐变 ， 第 三 个 是 
指定 位 置 的 圆 形 渐变 

例 2 设 定 了 形状 关键 字 circle， 于 是 渐变 的 形状 变 得 均匀 ， 并 在 元 素 最 近 的 边 达到 

了 终点 ， 形 成 了 圆 形 渐 变 。 而 长 边 剩 下 的 区 域 则 填充 了 终点 的 颜色 。 例 3 中 的 位 置 

参数 50px 30px 把 渐变 的 圆心 放 到 了 靠近 左上 角 的 位 置 。 


好 了 ， 通 过 以 上 介绍 ， 你 应 该 已 经 了 解 了 渐变 的 原理 。 本 书后 面 几 章 在 讨论 CSS 的 
实际 应 用 时 ， 还 会 给 出 如 何 使 用 它们 的 更 多 示例 。 

关于 这 些 例子 的 详细 解释 ， 以 及 如 何 控制 放射 性 渐变 的 位 置 等 内 容 ， 建 议 大 家 看 一 
看 我 的 电子 书 Visual Stylin? with CSS, 2012 年 由 Peachpit Press 出 版 。 
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小 结 


本 章 内 容 不 少 ， 我 们 讲 了 盒 模型 的 概念 ， 讲 了 怎么 设 定 外 边 距 、 内 边 距 和 边框 。 你 
也 知道 了 通过 浮动 可 以 实现 文字 绕 排 图 片 的 效果 ， 可 以 让 块 级 元 素 并 列 排 在 一 行 ， 
以 及 通过 清除 浮动 元 素 ， 可 以 强制 包含 元 素 包 围 浮动 的 子 元 素 。 而 定位 和 显示 属性 ， 
为 我 们 提供 了 组 织 页 面 元 素 的 手段 。 本 章 最 后 介绍 了 通过 元 素 的 背景 层 ， 为 元 素 的 
内 容 添加 背景 颜色 、 背 景 图 片 和 渐变 效果 。 


下 一 章 我 们 得 讲 一 讲 CSS 字体 和 文本 了 。 当 然 ， 也 会 告诉 大 家 一 些 创 建 专业 排版 效 
果 的 技术 。 








4.1 


字体 和 文本 


网 页 设计 中 很 多 时 候 都 要 处 理 文本 ， 包 括 段落 、 标 题 、 列 表 、 菜 单 和 表单 中 的 文本 。 
因此 ,理解 本 章 要 讲 的 字体 和 文本 属性 ， 对 于 创造 出 专业 水 准 的 网 页 排版 非常 重要 。 
一 个 网 站 的 品质 如 何 ， 有 时 候 只 要 看 看 它 用 的 字体 就 能 一 目 了 然 。 如 果 说 图 片 只 是 
蛋糕 上 的 糖衣 ， 那 么 排版 才 是 卓越 设计 的 根本 。 

这 一 章 主要 介绍 字体 和 文本 ， 以 及 与 它们 相关 的 CSS 属性 。CSS3 最 新 的 Web 字体 
当然 不 能 少 ， 我 们 会 看 一 看 怎么 让 字体 可 以 随 网 页 下 载 到 用 户 的 浏览 器 。 这 样 就 不 
必 茜 巴巴 地 企盼 用 户 机 器 上 有 某 种 字体 了 ， 你 完全 可 以 自信 地 让 全 地 界 用 户 都 看 到 
预期 的 排版 效果 。 


就 从 字体 开始 讲 起 吧 。 


rin 
字体 
网 页 中 的 字体 有 三 个 来 源 。 


a 用 户 机 器 中 安装 的 字体 。( 直到 最 近 , 这 些 字体 还 是 能 在 网 页 中 放心 使 用 的 唯一 一 
批 字体 。) 

a 保存 在 第 三 方 网 站 上 的 字体 。 最 常见 的 是 Typekit 和 Google， 可 以 使 用 link 标签 
把 它们 链接 到 你 的 页 面 上 。 

O 保存 在 你 的 Web 服务 器 上 的 字体 。 这 些 字体 可 以 使 用 efont-face 规则 随 网 页 一 起 
发 送 给 浏览 器 。 
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接 下 来 ,我 们 先 讨论 如 何 使 用 那些 安装 在 用 户 机 器 中 的 字体 。 随 后 在 4.3 15 "Web 
字体 大 揭秘 ”中 再 讨论 另外 两 种 字体 来 源 。 


好 吧 ， 以 下 就 是 与 字体 样式 相关 的 6 个 属性 。 


Q font-family 

Q font-size 

OD font-style 

OD font-weight 

ū font-variant 

Q font (简写 属性 ) 





难道 字体 和 文本 不 是 一 回 事 ? 


当然 不 是 。 请 听 我 解释 。 


字体 是 “文字 的 不 同体 式 ” 或 者 “ 字 的 形体 结构 ”。 对 于 英文 而 言 ， 每 种 字体 都 是 由 一 组 具 
有 独特 样式 的 字母 、 数 字 和 符号 组 成 的 。 根 据 外 观 ， 字 体 可 以 分 为 不 同 的 类 别 ( font 
collection), 包括 衬 线 字体 ( serif ) 、 无 衬 线 字体 ( sans-serif ) 和 等 宽 字体 (monospace ) o 
每 一 类 字体 可 以 分 成 不 同 的 字体 族 (font family) ， 比 如 Times 和 Helvetica。 而 字体 族 中 
又 可 以 包含 不 同 的 字 型 (font face) ， 反 映 了 相应 字体 族 基 本 设计 的 不 同 变化 ， 例 如 Times 


Roman, Times Bold, Helvetica Condensed 和 Bodoni italics 
文本 就 是 一 组 字 或 字符 ， 比 如 章 标题 、 段 落 正文 等 等 ， 跟 使 用 什么 字体 无 关 。 


CSS 为 字体 和 文本 分 别 定义 了 属性 。 人 字体 属性 主要 描述 一 类 字体 的 大 小 和 外 观 。 比 如 ， 使 用 
什么 字体 族 (是 Times, 还 是 Helvitica) ， 多 大 字号 ， 粗 体 还 是 斜体 。 文 本 属性 描述 对 文本 的 
处 理 方式 。 比 如 ， 行 高 或 者 字符 间距 多 大 ， 有 没有 下 划 线 和 缩 进 。 


这 就 是 我 对 字体 和 文本 之 间 区 别 的 认识 。 如 果 你 想 让 文字 加 粗 , 或 者 变 和 斜体 ， 可 以 设 定 字 体 属 
性 。 而 行 高 和 缩 进 这 种 只 有 对 文本 块 (比如 标题 和 段落 ) 才 有 意义 的 样式 ， 则 要 使 用 文本 属性 


设 定 。 


4.1.1 字体 族 


示例 : h2 (font-family:times, serif;}。 
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font-family 用 于 设 定 元 素 中 的 文本 使 用 什么 字体 。 一 般 来 说 ， 应 该 给 整个 页 面 设 定 
一 种 主 字体 ， 然 后 只 对 那些 需要 使 用 不 同 字体 的 元 素 再 应 用 font-family。 要 为 整个 
页 面 指定 字体 ， 可 以 设 定 body 元 素 的 font-family 属性 : 





body (font-family:verdana, sans-serif;) 


font-family 是 可 以 继承 的 属性 ， 因 此 它 的 值 会 遗传 给 所 有 后 代 元 素 。 对 于 body 元 
素来 说 ， 这 个 字体 设 定 可 以 遗传 给 标记 中 所 有 其 他 元 素 。 








据 测 试 ，font-family 的 值 (字体 名 ) 不 区 分 大 小 写 。 但 是 ， 你 可 不 能 修改 Google 
或 其 他 在 线 字体 库 生 成 的 字体 名 ， 否 则 很 可 能 无 法 使 用 它们 提供 的 定制 字体 。 


既然 字体 要 么 来 自用 户 机 器 ,要么 来 自 网 上 , 那么 就 始终 存在 某 种 字体 不 能 在 某 个 网 
页 中 使 用 的 可 能 。 正 因为 如 此 ， 设 定 字体 时 要 给 出 一 组 字体 来 ， 这 组 字体 叫 字 体 栈 。 


用 字体 栈 指定 本 地 字体 

用 户 机 顺 上 的 字体 是 随 操作 系统 一 起 安装 的 ， 可 以 由 本 地 应 用 共享 。 每 种 操作 系统 
自 带 的 字体 不 多 ， 而 且 用 户 随 时 会 安装 或 删除 字体 ， 因 此 我 们 永远 也 不 敢 保证 一 定 
能 用 某 种 字体 来 显示 网 页 。 为 此 ， 在 指定 文本 的 字体 时 ， 需 要 多 列 出 几 种 后 备 字体 ， 
以 防 第 一 种 字体 无 效 。 这 个 字体 的 列表 也 叫 字 体 栈 。 

简单 地 说 ， 如 果 用 户 机 器 上 有 相应 字体 ， 那 字体 栈 能 保证 用 户 以 预期 字体 来 阅读 网 


页 文本 ， 如 果 用 户 机 器 上 没有 相应 字体 ， 那 么 用 户 还 可 以 使 用 另 一 种 效果 可 以 接受 
的 字体 阅读 。 














body (font-family:"trebuchet ms", tahoma, sans-serif;] 
如 果 字 体 名 像 Trebuchet MS 一 样 多 于 一 个 单词 (有 空格 )， 应 该 加 上 引号 。 


这 里 的 字体 栈 相 当 于 跟 浏览 器 说 :“ 使 用 Trebuchet MS 字体 显示 这 个 文档 , 如 果 机 器 
里 没有 这 款 字体 , 那 就 使 用 Tahoma 代 蔡 ,如果 这 球 字 体 也 没有 ， 那 就 随便 找 一 种 机 
器 里 有 的 无 衬 线 字体 吧 。” 注意 ， 给 font-family 字体 栈 的 最 后 一 项 指定 一 个 通用 字 
体 类 非常 重要 ， 比 如 serif、sans-serif， 这 是 一 种 最 保险 的 方法 。 


有 哪些 通用 的 字体 类 呢 ? 有 以 下 5 种 : 


O serif， 也 就 是 衬 线 字体 ， 在 每 个 字符 笔画 的 末端 会 有 一 些 装饰 线 ; 
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口 sans-serif， 也 就 是 无 衬 线 字体 ， 字 符 笔画 的 末端 没有 装饰 线 ; 

口 monospace, 也 就 是 等 宽 字 体 , 顾名思义 , 就 是 每 个 字符 的 宽度 相等 ( 也 称 代 码 体 ); 
O cursive， 也 就 是 草书 体 或 手写 体 (在 本 章 后 面 排版 The Hound of the Baskervilles, 
即 《 巴 斯 克 维 尔 庄 园 的 猎犬》 的 示例 中 可 以 看 到 ); 

口 fantasy， 不 能 归 入 其 他 类 别 的 字体 ( 一般 都 是 奇形怪状 的 字体 )。 








使 用 这 些 通用 字体 类 的 目的 ， 就 是 确保 在 最 坏 的 情况 下 ， 文 档 起 码 可 以 通过 正确 的 
字形 来 显示 。 


在 选择 字体 栈 的 字体 时 ， 也 要 多 留心 。 用 过 Dreamweaver 的 读者 可 能 知道 ， 每 次 在 
CSS 文件 中 输入 font-family 时 , 它 都 会 弹出 一 个 菜单 让 你 选择 字体 。 但 每 个 菜单 项 
中 列 出 的 字体 相互 并 不 是 理想 的 蔡 代 对 象 。 比 如, Dreamweaver 会 给 出 如 下 字体 栈 的 
建议 : 

verdana, arial, helvetica, sans-serif; 


Verdana 的 线条 比较 粗 ， 而 且 其 “x 高 度 ”( x-height ) HE Arial 高 。 如 果 用 户 机 器 上 没 
有 Verdana， 就 会 使 用 Arial, 这 样 文本 块 看 起 来 比 预 期 会 小 一 些 。 因 为 每 一 行 能 放下 
的 单词 多 了 ， 文 本 块 高 度 也 可 能 随 之 缩短 。 


“Xx 高 度 ” 指 英文 字母 不 包含 (字母 d 和 pp 都 有 的 ) 上 伸 部 分 和 下 伸 部 分 的 主要 区 域 ， 
恰好 xX 没有 这 些 部 分 ， 所 以 就 用 它 的 高 度 来 度量 。 

这 里 有 一 个 测试 技巧 ， 就 是 把 每 种 字体 分 别 作为 字体 栈 的 第 一 款 字体 ， 然 后 查看 页 
面 ， 就 能 知道 每 款 后 备 字 体 对 页 面 的 布局 和 外 观 有 什么 影响 了 。 

Verdana 的 后 备用 Tahoma 最 好 ， 因 它们 的 “x 高 度 ” 相 同 。 

verdana, tahoma, sans-serif 

TRE EE — 1 EDGE ES 36 — ex HUJUS ER, TELE HSCT SE MSRE : 


helvetica, arial, sans-serif 


^ i s : Sube ise 0 xps E 
和 
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better-css-font-stacks/。 





F 面 这 个 例子 展示 了 一 个 衬 线 字 体 栈 ， 其 中 第 一 款 字体 是 用 户 可 能 没有 的 。 


(font-family:"hoefler text", georgia, times, serif;) 


在 这 种 情况 下 ， 一 定 要 在 字体 栈 后 面 补 上 那些 大 多 数 操作 系统 都 会 内 置 的 字体 ， 比 
如 这 里 的 georgia、times， 最 后 别 忘 了 通用 字体 类 serif. 


哪些 字体 是 在 所 有 浏览 器 中 都 能 用 的 ? 





这 个 问题 很 多 人 都 会 问 ， 但 却 没有 固定 的 答案 。 不 过 ， 以 下 字体 极 有 可 能 在 Mac 和 PC 中 都 安 


装 了 。 
Serif Sans-serif Monospace 
Georgia Arial Courier New 
Palatino/Book Antiqua Arial Black Lucida Console/Monaco 
Times New Roman Arial Narrow 
Tahoma Cursive 
Trebuchet MS Comic Sans MS 
Verdana 
Fantasy 
Impact 


随 着 手机 和 平板 电脑 的 普及 , 字体 可 用 性 越 来 越 难以 预测 。 因 此 ,在 字体 栈 中 指定 通用 字体 族 
变 得 越 来 越 重要 。 如 果 你 想 设 定 一 种 自己 Web 服务 器 上 的 特殊 字体 ， 让 用 户 可 以 随 页 面 下 
载 它 ， 可 以 参考 本 章 4.3 节 “Web 字体 大 揭秘 ”。 


4.1.2 ”字体 大 小 


示例 : h2 (font-size:18px;). 


浏览 器 样式 表 默 认为 每 个 HTML 元 素 都 设 定 了 font-size, KREE font-size 
的 时 候 ， 其 实 是 在 修改 默认 值 。 由 于 字体 大 小 在 标记 层次 中 是 可 以 继承 的 ， 假 如 你 
对 使 用 的 字体 大 小 单位 怎么 影响 继承 不 十 分 了 解 ， 那 很 容易 碰 到 有 些 字体 英名 其 妙 
变 大 或 变 小 的 问题 。 总 的 来 说 ， 用 于 设 定 字体 大 小 的 单位 有 两 种 ,一 种 是 绝对 单位 ， 
比如 像素 或 点 ， 另 一 种 是 相对 单位 ， 比 如 百分比 或 em。 下 面 我 们 就 解释 这 两 种 单位 
的 区 别 。 
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font-size 是 可 以 继承 的 。 换 句 话 说， 改变 一 个 元 素 的 字体 大 小 ， 可 能 会 导致 其 子 元 
素 字 体 大 小 成 比例 地 变化 。 比 如 说 把 body 元 素 的 font-size 设 定 为 200%， 那 么 页 面 
中 所 有 元 素 的 文本 都 会 增 大 一 倍 。 


之 所 以 出 现 这 种 效果 ， 是 因为 浏览 器 样式 表 在 设 定 所 有 元 素 的 字体 大 小 时 ,使 用 的 
都 是 相对 单位 em。 比 如，h1 被 设 定 为 2am，h2 是 1.5em, p 是 1em。 默认 情况 下 ，1em 
等 于 16 像素 ， 这 也 是 font-size 的 基准 大 小 。 换 算 成 绝对 值 ，h1 就 是 32 像素 ，h2 
是 24 像素 , p 是 16 像素 。 

如 果 把 body 的 字体 大 小 设 定 为 20px, 就 是 重新 设 定 了 基准 大 小 (body 可 是 所 有 元 素 
的 祖先 啊 )。 因 此 ，ha 会 变 成 40 像素 ，h2 会 变 成 30 像素 ， 而 p 会 变 成 20 像素 。 不 
ib, 那些 以 像素 之 类 的 绝对 单位 重新 设 定 字体 大 小 的 元 素 ， 不 会 继承 祖先 元 素 的 字 
体 大 小 ， 它 们 会 按照 设 定 的 大 小 显示 。 


好 了 ， 下 面 看 一 看 设 定 字 体 大 小 的 两 种 方法 。 








1. 绝对 字体 大 小 


ERR. WRF (pica) 或 英寸 设 定 字体 大 小 很 简单 ， 它 们 是 绝对 单位 ， 因 此 设 定 多 
大 就 多 大 ， 与 祖先 元 素 的 字体 大 小 无 关 。 使 用 绝对 单位 的 缺点 很 明显 ， 那 就 是 在 需 
要 调整 页 面 所 有 元 素 的 字体 大 小 时 ， 必 须 一 个 一 个 地 修改 样式 表 中 的 font-size, +H 
当 麻 烦 。 





设 定 绝 对 字体 大 小 时 , 也 可 以 使 用 关键 字 值 , 比如 x-small、medium、x-large, 等 等 。 
其 中 ，medium 等 于 基准 大 小 ， 其 他 关键 字 要 么 小 一 点 ， 要 么 大 一 点 。 关 键 字 值 涵 盖 
的 范围 太 窜 ， 所 以 使 用 不 广泛 ， 如 果 你 感 兴趣 ， 可 以 看 看 这 篇 文章 : http://css-discuss. 
incutio.com/wiki/Using Keywords ( 注意 大 小 写 )。 


简 言 之 ， 修 改 body 元 素 的 字体 大 小 ， 不 会 影响 页 面 中 以 绝对 单位 控制 的 元 素 , 但 没 
有 设 定 字体 大 小 的 元 素 则 会 与 body 的 字体 大 小 成 比例 变化 。 





2. 相对 字体 大 小 

使 用 百分比 、em 或 rem ( 根 元 素 的 字体 大 小 ) 设 定 字 体 大 小 要 复杂 一 些 。 如 果 你 给 
某 个 元 素 设 定 了 相对 字体 大 小 ， 则 该 元 素 的 字体 大 小 要 相对 于 最 近 的 “被 设 定 过 字 
体 大 小 的 ”祖先 元 素来 确定 。 


比如 以 下 标记 


«body» 
«p»This is «strong»very important!«/strong»«/p» 
«/body» 


和 下 面 的 CSS 


p (font-size:.75em;] 

strong (font-size:.75em;] 

如 果 你 想 使 用 em, 但 又 需要 设 定 具体 的 像素 大 小 ， 可 以 把 body 的 font-size 设 定 为 
62.5%。 这 样 ， 就 等 于 把 基准 大 小 从 16 像素 改 为 10 像素 (16 x 62.5%=10 )。 然 后 ， 
em 与 像素 的 对 应 关系 就 十 分 明确 了 ， 比 如 lem 等 于 10 像素 ，1.5em 等 于 15 像素 ， 
2em 等 于 204 X, XX. 


p 元 素 的 文本 为 12 像素 ( body 的 16 像素 基准 大 小 x.75 = 12), 折合 成 点 单位 是 9 点 。 
strong 是 p 的 子 元 素 ， 它 的 文本 是 多 大 呢 ? 相对 大 小 会 逐 层 复合 ，strong 的 大 小 应 
该 是 16 像素 x .75 x .75 = 9 像素 。 要 熟悉 相对 单位 的 这 种 计算 方式 ， 需 要 多 实践 。 最 
终 你 会 知道 ,改变 一 个 元 素 的 相对 字体 大 小 ， 其 子 元 素 的 字体 大 小 也 会 同比 例 变化 。 


) 使 用 相对 字体 大 小 ， 自 动 调整 各 层 元 素 。 


相对 大 小 的 好 处 也 很 明显 ， 因 为 使 用 相对 大 小 后 ， 通 过 调整 body 元 素 的 字体 大 小 ， 
可 以 成 比例 地 改变 所 有 元 素 的 字体 大 小 。 或 者 ， 至 少 能 通过 改变 某 个 祖先 元 素 ， 只 
影响 它 的 所 有 子 元 素 。 在 反复 修改 布局 设计 的 时 候 ， 这 样 显然 能 节省 时 间 。 可 反 过 
来 ， 毕 竟 是 “ 牵 一 发 而 动 全 身 ” 的 事 ， 所 以 使 用 相对 字体 大 小 时 ， 必 须 事 先 规划 好 。 


使 用 绝对 字体 大 小 是 没有 办 法 统一 调整 的 。 绝 对 字体 大 小 只 能 个 别 设 定 , 个别 修改 。 
当然 啦 ， 使 用 绝对 单位 的 好 处 呢 ， 就 是 在 祖先 元 素 的 字体 大 小 变化 时 ， 不 会 出 现 意 
外 的 “连锁 反应 ”。 

不 管 怎么 说 ,今天 设备 的 屏幕 尺寸 可 请 千差万别 ， 既 有 特大 的 显示 屏 ， 又 有 很 小 的 
手机 屏幕 。 在 这 种 形势 下， 更 容易 缩放 的 相对 大 小 应 该 是 首选 。 


3. 关于 rem 单位 


CSS3 新 增 了 一 个 相对 单位 rem (root em， 根 em )， 这 个 单位 引起 了 广泛 关注 。 这 个 
单位 与 em 有 什么 区 别 呢 ? 区 别 在 于 使 用 rem 为 元 素 设 定 字体 大 小 时 , 仍然 是 相对 大 
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小 ,但 相对 的 只 是 HTML 根 元 素 。 这 个 单位 可 谓 集 相 对 大 小 和 绝对 大 小 的 优点 于 一 
号 ， 通 过 它 既 可 以 做 到 只 修改 根 元素 就 成 比例 地 调整 所 有 字体 大 小 ， 又 可 以 避免 字 
体 大 小 逐 层 复合 的 连锁 反应 。 目 前 ， 除 了 IE8 及 更 早 版 本 外 ， 所 有 浏览 器 均 已 支持 
rem。 对 于 不 支持 它 的 浏览 器 ， 应 对 方法 也 很 简单 ， 就 是 多 写 一 个 绝对 单位 的 声明 。 
这 些 浏览 需 会 忽略 用 rem 设 定 的 字体 大 小 。 下 面 就 是 一 个 例子 : 

/*IEB 及 之 前 版 本 的 IE 浏览 器 使 用 14 像素 */ 

p (font-size:14px; font-size:.875rem;] 

在 用 户 使 用 “查看 > 文字 大 小 ”菜单 调整 网 页 文本 大 小 的 时 候 , IE9 及 更 早 版 本 只 能 
缩放 以 相对 单位 设 定 的 文本 (使 用 像素 之 类 的 绝对 单位 设 定 的 文本 无 法 缩放 )。 换 各 
话说 , 使 用 rem 单位 在 IE7 和 IE6 中 存在 一 个 小 小 的 副作用 , 那 就 是 这 些 浏览 器 的 用 
户 必须 使 用 “查看 > 缩放 ”来 调整 整个 页 面 的 大 小 。 当 然 ， 这 也 算 一 个 应 该 升级 到 
现代 浏览 器 的 原因 吧 。 


下 面 我 们 再 讨论 其 他 字体 相关 的 属性 。 





4.13 ”字体 样式 
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值 : italic, oblique, normal, 
示例 : h2 (font-style:italic;) 。 
font-style 设 定 字 体 是 斜体 ， 还 是 正体 。 用 oblique 代替 italic 的 结果 也 一 样 。 


换 句 话说 ，font-style 的 作用 仅仅 是 通过 italic 把 正体 设 为 斜体 ， 或 者 通过 normal 
把 斜体 设 为 正体 。 比 如 下 面 的 例子 : 


p (font-style:italic;] 

span (font-style:normal;] 

<p>This is italicized text with «span»a piece of non-italic text«/span» in the 
middle.«/p» 


会 得 到 图 4-1 所 示 的 结 


This is italicized text with a piece of non-italic text in the middle. 





图 4-1 font-style 的 normal 值 导 致 一 段 斜体 文本 中 的 几 个 单词 以 正体 显示 


英文 中 的 斜体 主要 表示 强调 。 假 如 你 真 想 表 示 强 调 , 那 在 HTML. 标记 中 直接 使 用 <emy 
标签 即 可 ， 因 为 它 默 认 就 是 斜体 。 


所 谓 “ 常 规 ” 值 


font-style 有 一 个 normal 值 ， 中 文 就 是 “常规 ”的 意思 。 这 个 值 其 实 不 仅 font-style 有 ， 
很 多 其 他 属性 也 有 ， 它 的 作用 就 是 取消 所 有 的 特殊 样式 。 什 么 情况 下 才 会 用 它 呢 ? 


这 个 值 是 用 来 有 选择 地 覆盖 某 个 默认 或 你 设 定 的 全 局 属性 的 。 比 如 ，h1 到 h6 默认 为 粗 体 ， 如 
果 你 想 让 h 以 常规 字体 显示 ， 就 需要 设 定 hy {font-weight:normal;}。 如 果 你 的 样式 表 里 声 
明了 a {font-variant:small-caps;}， 那 网 页 中 的 英文 链接 都 会 变 成 小 型 大 写字 母 。 要 是 你 
想 让 某 一 组 链接 仍然 以 常规 的 大 小 写 形式 显示 ， 可 能 得 另 写 一 个 类 似 这 样 的 声明 : 


a.speciallink {font-variant:normal;}。 


4.1.4 ”字体 粗细 


可 能 的 值 : 100、200……900， 或 者 lighter, normal, bold 和 bolder, 
示例 : a (font-weight:bold;j. 


实际 上 ， 前 面 给 出 的 (CSS 标准 规定 的 ) 这 些 数字 值 没 有 什么 用 ， 对 浏览 器 来 说 ， 
它 只 显示 font-weight 属性 的 两 个 值 ，bold 和 normal。 由 于 浏览 器 对 数字 值 的 实现 
各 不 相同 ， 所 以 从 常规 字体 到 粗 体 的 切换 可 能 发 生 在 不 同 的 数值 上 一 一 通常 是 400 
Efo AZ, XF font-weight 属性 来 说 ， 最 好 只 用 bold 和 normal 这 两 个 值 ， 效 果 
如 图 4-2 所 示 。 


p.shows weight (font-weight:bold;] 

p.shows weight span (font-weight:normal;] 

«p class-"shows weight"»This is bolded text with «span»a piece of non-bolded 
text«/span» in the middle.«/p» 


This is bolded text with a piece of non-bolded text in the middle. | 


4-2 font-weight 的 normal 值 导致 一 段 粗 体 文本 中 的 几 个 单词 以 常规 字体 显示 


粗 体 的 主要 作用 是 表示 重要 。 实 际 上 ，HTML 元 素 strong 也 表示 重要 ， 而 它 的 默认 
样式 就 是 粗 体 。 
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4.1.5 ”字体 变化 


值 : small-caps、normal。 
示例 : blockquote [font-variant:small-caps;). 


font-variant 属性 除了 normal， 就 只 有 一 个 值 ， 即 smal1-caps。 这 个 值 会 导致 所 有 
小 写 英 文字 母 变 成 小 型 大 写字 母 : 





h3 (font-variant:small-caps;]) 


以 上 代码 能 得 到 如 图 4-3 所 示 的 结 


THIS TEXT SHOWS THE FONT-VARIANT VALUE SMALL-CAPS. | 


图 4-3 ”使 用 小 型 大 写字 母 显示 的 标题 ， 注 意 标记 文本 中 原来 就 大 写 的 第 一 个 词 的 首 字 母 并 没有 变 


我 经 常 将 small-caps 用 于 ::first-line 伪 元 素 ， 其 用 法 可 以 在 本 章 后 面 排版 The 
Hound ofthe Baskervilles(《 巴 斯 克 维 尔 庄 园 的 猎犬 》) 的 示例 中 看 到 。 不 过 ， 在 此 提 
醒 读者 ， 对 英文 来 说 一 定 要 慎 用 这 种 样式 ， 因 为 大 写字 母 不 像 小 写字 母 那样 有 上 伸 
部 分 和 下 伸 部 分 作为 视觉 提示 ， 所 以 全 都 使 用 大 写字 母 会 增加 辨识 难度 。 








4.1.6 ”简写 字体 属性 
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示例 : 


p {font: bold italic small-caps .9em helvetica, arial, sans-serif;} 
<p>Here's a piece of text loaded up with every possible font property.«/p» 


以 上 使 用 font 简写 属性 的 代码 能 得 到 图 4-4 所 示 的 效果 。 


HERE'S A PIECE OF TEXT LOADED UP WITH EVERY POSSIBLE FONT PROPERTY. | 


图 4-4 一 条 声明 指定 字体 加 粗 、 和 斜体 、 小 型 大 写字 和 母 、 大 小 和 字体 族 


没 错 ，font 属性 是 一 个 简写 形式 ， 通 过 它 只 要 一 条 CSS 声明 就 可 以 设 定 所 有 字体 属 
性 。 不 过 ,使 用 这 个 简写 形式 要 遵守 两 条 规则 ， 否 则 浏览 器 无 法 正确 解释 声明 的 值 。 


4.2 文本 属性 


规则 一 : 必须 声明 font-size 和 font-family 的 值 。 
规则 二 : 所 有 值 必须 按 如 下 顺序 声明 。 

1. font-weight, font-style, font-variant 不 分 先后 ; 
2. 然后 是 font-size; 

3. 最 后 是 font-family。 


Ty ^ 实际 上 ， 在 设 定 font-size 属性 的 同时 ， 可 以 顺便 设 定 line-height ( 行 高 ) 值 。 也 
就 是 说 ， 字 体 大 小 和 行 高 的 值 可 以 写 在 一 块 ， 比 如 12px/1.5。 当 然 ，line-height 是 
文本 属性 ， 下 一 节 我 们 会 讲 到 它 。 


4.2 文本 属性 


上 一 节 我 们 讲 了 字体 属性 , 这 一 节 讲 文本 属性 。 如 果 你 想 缩 进 段 落 , 实现 10 中 的 上 
角 标 效果 ， 在 标题 字符 间 增 加 一 些 间距 ， 以 及 其 他 一 些 排 版 效果 ， 就 要 用 到 CSS 的 
文本 属性 。 











以 下 是 几 个 最 有 用 的 CSS 文本 属性 : 


Q text-indent 

口 letter-spacing 
a word-spacing 

D text-decoration 
D text-align 

Q line-height 


口 text-transform 





Q vertical-align 


4.2.1 文本 缩 进 
值 : 长 度 值 ( 正 、 负 均 可 )。 
示例 : p {text-indent:3em;}。 
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text-indent 属性 设 定 行内 盒子 相对 于 包含 元 素 的 起 点 。 默 认 情 况 下 ， 这 个 起 点 就 是 
包含 元 素 的 左上 角 。 


给 text-indent 设 定 正 值 ， 文 本 向 右 移 ， 得 到 的 是 段落 首 行 缩 进 效果 ， 如 图 4-5( 中 
的 第 一 个 段落 ) 所 示 。 


eoo Text-Indent Property 


"ex E e Ja 4 


i 











This is example 1. This paragraph of text has an indent of 3 ems. Because its value is positive (greater than 
10), all the text stays within the element. Things get more complicated if | start using negative margins to make the 
first line "outdent" instead. 








" is example 2. This paragraph of text has a negative indent. Because this element does not have enough space 
o its left, the hanging text is clipped by the edge of the browser window. The border of this element is displayed to 
help you see the nature of the problem. 











lement has a left margin value greater than the negative indent value, the hanging text is not clipped by the 
dge of the browser window. The border of this element is displayed to help you see how a potential problem 
s avoided. 





* example 3. This paragraph of text has the same negative indent as the example above, but because this 
i 





This is example 4. Here is the same styling as the previous paragraph, but without the element border so you can 
clearly see the effect. Indents provide a visual indication of the start of paragraphs when you don't want to use 
space to separate them. 

Here is a second paragraph with no space between it and the previous one. The negative value indent makes it 
clear that this is a new paragraph. Positive value indents can serve the same purpose. 





图 4-5 这 4 个 段落 演示 了 text-indent 属性 


继承 的 值 与 计算 的 值 


这 里 有 一 个 非常 重要 的 问题 ， 必 须 请 读者 注意 : text-indent 是 可 以 被 子 元 素 继承 的 。 如 果 你 
在 一 个 div 上 设 定 了 text-indent 属性 ,那么 div 中 的 所 有 段落 都 会 继承 该 缩 进 值 。 然 而 ,与 
所 有 继承 的 CSS 值 一样 ， 这 个 缩 进 值 并 不 是 祖先 元 素 中 设 定 的 值 ， 而 是 计算 的 值 。 下 面 举 一 个 
例子 说 明 。 


假设 有 一 个 400 像素 宽 的 div， 包 售 的 文本 缩 进 5%， 则 缩 进 的 距离 是 20 像素 (400 的 5%) o 
在 这 个 div 中 有 一 个 200 像素 宽 的 段落 。 作 为 子 元 素 , 它 继承 父 元 素 的 text-indent 值 , 所 以 
它 包 合 的 文本 也 缩 进 。 但 继承 的 缩 进 值 是 多 少 呢 ? 不 是 5%, 而 是 20 像素 。 也 就 是 说 ， 子 元 素 
继承 的 是 根据 父 元 素 宽 度 计算 得 到 的 缩 进 值 。 结果, 虽然 段落 只 有 父 元 素 一 半 宽 , 但 其 中 的 文 
本 也 会 缩 进 20 像素 。 这 样 可 以 确保 无 论 段落 多 宽 ， 它 们 的 缩 进 距离 都 一 样 。 当 然 ， 在 子 元 素 
上 重新 设 定 text-indent 属性 ， 可 以 覆盖 继承 的 值 。 


4.2 ”文本 属性 


文本 之 “he” 


在 CSS 中 控制 文本 要 理解 一 个 重要 概念 。CSS 会 把 元 素 中 的 文本 放 在 一 个 不 可 见 的 盒子 里 ， 比 
如 对 p 元 素 中 的 一 段 文本 ，CSS 将 其 视 为 很 长 的 一 行 ， 只 不 过 在 遇 到 容器 边界 时 会 折 行 。 为 了 
看 到 这 个 长 长 的 盒子 ， 图 4-6 为 包 售 元 素 (段落 ) 添加 了 粗 边 框 ， 为 文本 盒子 添加 了 细 边 框 。 
所 有 文本 属性 都 会 应 用 给 这 个 细 边 框 的 文本 盒子 。 


eoo Text Snake 


4|» Ei ca P 




















Here is a long paragraph of text. Think of it as a long, thin snake contained within the paragraph's box. The 








paragraph element contains the text, but CSS also applies a box around the text itself, and it is this inner box 








to which the text properties are applied. In this example, the containing element's box is in red and the inner 








box around the text is in green. As you can see from the way the inner box is drawn, CSS sees the text as 











one long strip, even though the width of the container causes it to be broken across several lines. 








图 4-6 文本 被 包含 在 一 个 细 长 的 盒子 中 ， 这 个 盒子 往往 因为 折 行 而 断 开 ， 分 布 在 多 行 中 

在 这 个 例子 中 ， 文 本 元 素 大 致 如 下 : <p><span>Here is a long paragraph..</span></p> 
相应 的 样式 如 下 : p {border:3px solid red;)span {border:1px solid green;) 

这 里 的 文本 盒子 跨行 时 是 断 开 的 ， 只 有 第 一 行 开 头 和 最 后 一 行 末尾 是 封闭 的 。 知 道 这 一 点 ,可 
以 更 快 地 实现 你 想 要 的 效果 。 比 如 ， 你 想 缩 进 段落 的 第 一 行 ， 可 以 使 用 文本 属性 text-indent 


(如 图 4-5 所 示 ) ， 而 实际 上 你 缩 进 的 是 这 个 文本 盒子 的 起 点 位 置 。 后 续 的 行 是 不 会 缩 进 的 ， 
因为 在 CSS 看 来 ， 它 们 就 是 一 个 整体 。 


如 果 你 想 缩 进 整 个 段落 ， 可 以 使 用 段落 的 margin-left 属性 。 换 句 话说， 你 得 把 整个 包含 盒子 
向 右 移动 才 行 。 而 你 永远 要 记 住 ， 文 本 属性 只 应 用 于 这 个 长 长 的 、 细 细 的 、 内 部 的 文本 盒子 ， 
而 不 是 包含 元 素 的 盒子 。 


要 是 给 text-indent 设 定 一 个 负 值 , 那 段落 的 首 行 会 从 包含 元 素 的 左 侧 探 出 头 来 。 如 
果 你 想 要 这 种 效果 ， 那 么 一 定 得 给 它 留 出 空间 。 没 有 空间 ， 而 且 在 左 侧 还 有 其 他 元 
素 的 情况 下 ， 探 出 头 来 的 文本 就 会 挡住 那个 元 素 。 如 果 左 侧 是 浏览 融 窗 口 ， 那 它 就 
会 被 切 掉 ( 如 图 4-5 中 第 二 段 所 示 ) 解决 这 个 问题 的 技巧 ， 就 是 设 定 一 个 比 负 缩 进 
值 更 长 的 负 左 外 边 距 值 。 图 4-5 中 第 二 段 的 缩 进 值 为 -1.5em， 而 在 图 中 第 三 段 , 我 们 
设 定 了 值 为 2em 的 左 外 边 距 ， 以 下 是 相应 的 CSS 规则 : 
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pt 
text-indent:-1.5em; 
margin-left:2em; 
border:1px solid red; 


) 


缩 进 给 人 一 种 专业 版 式 的 感觉 ， 也 能 提示 读者 每 段 文 本 在 哪儿 开头 。 请 注意 ， 在 设 
定 缩 进 和 外 边 距 时 要 像 这 里 一 样 使 用 em, 以 便 在 用 户 (或 你 自己 ) 改变 字体 大 小 时 ， 
它们 的 长 度 能 够 按 比例 变化 。 


4.2.2. ”字符 间距 


E: 任何 长 度 值 ( 正 、 负 值 均 可 )。 
示例 : p (letter-spacing:.2em;). 


letter-spacing 为 正 值 时 增 大 字符 间距 ， 为 负 值 时 缩小 间距 ”。 无 论 设 定 字体 大 小 时 
使 用 的 是 什么 单位 ， 设 定 字符 间距 一 定 要 用 相对 单位 ， 以 便 字 间距 能 随 字 体 大 小 同 
比例 变化 。 图 4-7 展示 了 默认 字符 间距 、 增 大 字符 间距 和 缩小 字符 间距 的 例子 。 用 传 
统 排版 的 术语 讲 ，letter-spacing 控制 字 距 (tracking )， 也 就 是 文本 块 中 所 有 字符 之 
间 的 间 趾 。 与 字 距 相对 的 一 个 排版 术语 叫 字 紧 排 (kerning )， 紧 排 只 调整 两 个 字符 的 
间距 。 





Altering the letter-spacing changes the space between individual characters. This paragraph has normal spacing. 


Positive letter-spacing values increase the space 
between every character. 


Negative letter-spacing values bring the characters closer together. 


Here is a regular headline 


Here is a headline tightened 





图 4-7 调整 字符 间距 的 结果 























(D letter-spacing 对 英文 字母 、 汉 字 及 其 他 字符 都 起 作用 ， 为 方便 读者 理解 和 记忆 ， 特 地 译 为 “字符 间距 "。 另 ， 


letter-spacing 的 值 是 在 浏览 器 默认 值 基础 上 增加 或 减少 的 值 。 一 一 译 者 注 
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4.2 文本 属性 





默认 的 字符 间距 在 字体 变 大 时 会 使 文本 显得 松散 ， 因 此 缩小 大 标题 的 字 距 可 以 让 网 
页 显得 更 专业 。 图 4-7 中 缩小 字 距 的 例子 只 在 默认 间距 基础 上 缩小 了 .05em (1/20), 
再 多 的 话 可 能 会 导致 字符 交错 。 





4.2.3 ”单词 间距 
值 : 任何 长 度 值 ( 正 、 负 值 均 可 )。 
示例 : p (word-spacing:.2em;). 


单词 间距 与 字符 间距 非常 相似 ， 区 别 在 于 它 只 调整 单词 间距 ， 而 不 影响 字符 间距 。 
CSS 把 任何 两 边 有 空白 的 字符 和 字符 串 都 视 作 “单词 ”"。 另 外 , 单词 间距 比 字符 间 
距 更 容易 设 定 得 过 大 ， 从 而 导致 文本 难以 阅读 (参见 图 4-8 )。 


Oy 只 加 宽 字 符 间距 而 不 加 宽 单词 间距 ， 不 容易 看 出 有 什么 差别 。 此 时 ， 再 加 上 一 点 单 
5 词 间距 效果 会 很 好 。 


Altering the word-spacing changes the space between individual words. This paragraph has normal spacing. 
Negativewordspacingvaluesbringthewordsclosertogetherandcanreducereadability. 


Positive word spacing values increase the space between every word. 
Here is a regular headline 


Thisheadlinehas negative word spacing 


This headline has positive word spacing 





图 4-8 单词 间距 分 别 为 默认 值 、 负 值 和 正 值 时 的 几 个 段落 和 标题 


4.2.4 XER 


值 : underline, overline, line-through, blink, none, 


示例 : .retailprice (text-decoration:line-through;). 




















(D 纯 汉 字 文本 一 段 之 中 没有 空格 ， 因 此 word-spacing 对 中 文 网 页 几乎 没有 用 ， 但 对 中 英 混 排 段 落 可 能 有 用 。 
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除了 blink 之 外 ，text-decoration 属性 其 他 值 的 效果 如 图 4-9 所 示 。blink 是 为 文本 
添加 闪烁 效果 的 ， 实 际 上 很 讨厌 ， 应 该 少 用 ， 最 好 不 用 。 


This is text that is underlined using text-decoration. 


This is text that is overlined using text-decoration. 


This is text that is underlined and overlined using text-decoration. 
Ihisi it TENET lied to it. 





图 4-9 这 里 展示 了 text-decoration 属性 各 个 值 的 效果 ， 其 中 使 用 最 多 的 是 用 它 控制 链接 的 下 
划 线 

必须 注意 ， 上 网 的 人 都 习惯 了 把 带 下 划 线 的 文本 当成 链接 。 如 果 你 给 本 来 不 是 链接 

的 文本 加 上 下 划 线 ,很 容易 导致 困惑 和 无 效 点 击 。 








文本 装饰 最 主要 的 应 用 是 控制 链接 的 下 划 线 。 下 面 这 个 例子 展示 了 怎么 通过 
text-decoration 去 掉 导航 条 中 链接 的 下 划 线 。 导 航 条 中 的 文本 显然 是 可 以 点 击 的 ， 
下 划 线 徒 增 混乱 而 已 。 不 过 ， 在 鼠标 悬 停 状 态 下 加 上 下 划 线 ， 则 是 一 种 有 效 的 视觉 
反馈 。 


nav a (text-decoration:none;) 
a:hover [text-decoration:underline;) 


4.2.5 ”文本 对 齐 
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值 : left, right, center, justify. 
示例 : p (text-align:right;]. 


text-align 属性 只 有 44 ME, left, right, center 和 justify， 控 制 着 文本 在 水 平 
方向 对 齐 的 方式 。 其 中 ，center 值 也 可 以 用 来 在 较 大 的 元 素 中 居中 较 小 的 固定 宽度 
的 元 素 或 图 片 。 图 4-10 展示 了 text-align 属性 4 个 值 的 实际 效果 。 


4.2 ”文本 属性 


eoo Text-Align Property 


EI EM 3 c 





This is text that is left aligned and is the usual way 
that text is aligned. It's easy to read because every 
line starts against the left edge of the containing 
element and that's why it's the default setting. 


This is text that is right aligned and it can be 
somewhat hard to read because every line starts in a 
different place. 


This is text that is centered. Small blocks of text look 

good centered but it's hard to read large amounts of 

text as every line starts a different distance from the 
edge of the page. 


Justified text is both left and right aligned at the same 
time. This is achieved by mathematically increasing 
word space on a line-by-line basis. This can result in 
gaps of white space (known as rivers) throughout the 
text, if the containing element is narrow or if there are 
multiple numerous extended consecutive 
occurrences of exceptionally lengthy words like 
these, so that only a few fit on each line. 








4-10 text-align By 4 ME: 左 对 齐 、 右 对 齐 、 居 中 对 齐 和 两 端 对 齐 


4.2.6 íS 
值 : 任何 数字 值 (不 用 指定 单位 )。 
示例 : p (line-height:1.5;). 


CSS 通过 line-height 属性 实现 了 印刷 行业 中 常 说 的 加 铅 条 (leading) "。 铅 条 在 活 
字 排 版 时 代用 于 在 文本 行 之 间 增 加 间距 。 


^ A > " ` x B 
d: 相信 不 少 读者 是 头 一 次 听 说 “ 铝 条 ”。 铝 活字 印刷 时 代 ， 两 行 字模 之 间 的 空白 间距 就 
& 。 是 通过 向 其 中 加 入 细 铅 条 实现 的 。 


CSS 中 的 行 高 平均 分 布 在 一 行文 本 的 上 方 和 下 方 。 举 个 例子 ， 如 果 字 体 大 小 是 12 像 




















D 关于 传统 印刷 行业 中 “ 铅 条 ”这 个 术语 的 更 多 有 意思 的 背景 介绍 , 请 参考 图 灵 社 区 文章 “你 未 必 知 道 的 CSS 故事 : 
揭 开 leading 的 面纱 ”: http://www.ituring.com.cn/article/18076。 译 者 注 
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素 ， 行 高 是 20 像素 ， 则 浏览 器 会 在 文本 上 方 和 下 方 各 加 4 像素 的 空白 ， 以 凑 足 20 
像素 的 行 高 。” 


对 于 类 似 标 题 的 一 行文 本 来 说 ，line-height 增加 的 空白 就 像 外 边 距 一 样 ， 较 大 的 标 
4E (如 hi 和 h2) 往往 有 较 大 的 默认 行 高 。 这 一 点 应 该 记 住 , 因为 有 时 候 即 使 把 外 边 
距 和 内 边 距 全 去 掉 ， 标题 上 下 仍然 会 有 空 蝗 。 如 果 想 把 这 些 空白 也 去 掉 ， 那 就 只 能 
把 文本 的 行 高 设 定 为 比 字体 高 度 ( 就 是 字体 大 小 ) 还 要 小 ， 比 如 设 定 为 小 于 1 的 值 。 


Here is a paragraph of text with default line heiaht. Line height is the vertical 
distance between the baseline of one line of text and the next. This distance is a 
proportion of the font-size. 


The default line spacing is typjcally 1.2, but this paragraph has a tighter setting of 
P meaning ihe descenders oj one line wi touch the ascenders oN e one befow 
if iney appear above one another. 


This paragraph has a looser setting of 1.5. The font-size is 12 pixels and the line- 
height is 1.5 so the distance between the lines is 18 pixels. This gives an elegant 
look to your typography, but is a less efficient use of the vertical space. 





图 4-11 在 标准 行 高 的 基础 上 有 所 变化 ， 是 让 页 面 与 众 不 同 的 一 种 简单 方式 


如 图 4-11 所 示 , 修改 默认 行 高 最 简单 的 方式 就 是 使 用 font 快捷 属性 , 以 复合 值 的 形 
XE font-size fll line-height 值 写 在 一 块 ， 比 如 : 

div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;} 

就 这 个 例子 来 说 ， 行 高 就 是 字体 大 小 1.2em 的 1.4 倍 。 注 意 这 里 不 用 给 line-height 
值 指定 单位 ， 只 要 一 个 数值 就 可 以 。 此 时 ， 浏览 器 会 用 计算 得 到 的 1.2em 的 像素 数 
乘 以 1.4, 结果 就 是 行 高 。 如果 后 来 你 把 字体 大 小 增 大 到 1.5em, 则 行 高 仍然 是 1.5em 
计算 值 的 1.4 信 。 在 设 定 行 高 时 如 果 使 用 了 绝对 单位 ( 如 像素 )， 那 将 来 增 大 字体 有 
可 能 导致 行 与 行 之 间 重 车 。 





4.2.7 文本 转换 


(E: none, uppercase, lowercase, capitalize, 


示例 : p {text-transform:capitalize;}。 











OE, SMERE, AEE RE 
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4.2 文本 属性 


text-transform 属性 用 于 转换 元 素 中 文本 的 大 小 写 ， 它 可 以 设 定 英 文 文本 首 字 母 大 
写 、 全 部 字母 大 写 和 全 部 字母 小 写 。 图 4-12 展示 了 text-transform 属性 几 个 值 的 
作用 。 








This is regular text that has not been transformed. 
This Is Text That Is Capitalized Using The Tranform Capitalize Value. There Are No Capital (Uppercase) Letters In The Markup. 
THIS IS TEXT STYLED WITH THE TRANSFORM UPPERCASE VALUE. THERE ARE NO UPPERCASE LETTERS IN THE MARKUP. 


this is text that is written in uppercase but the lowercase value transforms it into lowercase text. 





4-12 ”使 用 text-transform 可 以 实现 类 似 英文 报纸 标题 的 效果 


capitalize 值 会 将 每 个 词 的 首 字 母 转换 为 大 写 ， 这 种 效果 在 很 多 广告 、 报 道 、 杂 志 
的 标题 中 很 常见 。 但 人 为 的 情况 下 , 12 "of", "as", 还 有 “Tom and Jerry Go to Vegas." 
中 的 “and” 这 些 词 首 字母 是 不 大 写 的 ， 而 在 CSS 中 ， 则 一 律 大 写 。 因 此 用 Css i 
定 capitalize 值 ， 你 看 到 将 是 “Tom And Jerry Go To Vegas." 





要 想 实现 小 型 大 写字 母 的 首 字母 放大 效果 ， 可 以 再 加 上 font-variant:small-caps 
+ 
声明 。 


4.2.8 ”垂直 对 齐 


值 : 任意 长 度 值 以 及 sub, super, top, middle, bottom 等 。 
示例 : span (vertical-align:6096;). 


vertical-align 以 基线 为 参照 上 下 移动 文本 ， 但 这 个 属性 只 影响 行内 元 素 。 如 果 你 
想 在 垂直 方向 上 对 齐 块 级 元 素 ,必须 把 其 display 属性 设 定 为 inline。vertical-align 
属性 最 常用 于 公式 或 化 学 分 子 式 中 的 上 标 和 下 标 ， 比 如 x*-y^ NO, 或 者 用 于 文本 
中 脚注 的 角 标 ， 比 如 把 星 号 变 成 上 角 标 。 我 个 人 不 太 喜 欢 浏 览 顺 为 上 标 设 定 的 默认 
样式 ,我 觉得 有 点 大 ,位 置 也 有 点 高 (下 标的 位 置 有 点 低 )。 写 一 点 样式 就 可 以 得 到 
更 好 的 效果 ， 而 且 能 够 跨 浏览 器 保持 相同 比例 。 

就 以 下 面 的 HTML 为 例 : 

«h4»Default «code»sub«/code» and «code»sup«/code» styles«/h4» 


«p»Enjoy mountain spring H«sub»2«/sub»0. It? s 10«sup»5«/sup» times better than 
tap«sup»&dagger;«/sup» water!«/p» 
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«p class-"customsmall"»«sup»8dagger;«/sup»«em»This means water provided 
through a municipal distribution system«/em»«/p» 

«h4»Custom «code»sub«/code» and «code»sup«/code» styles«/h4» 

«p class-"custom"»Enjoy mountain spring H«sub»2«/sub»0. It' s 10«sup»5«/sup» 
times better than tap«sup»&dagger;«/sup» water!«/p» 

«p class-"customsmall"»«sup»8dagger;«/sup»«em»This means water provided 
through a municipal distribution system«/em»«/p» 


配 上 下 面 的 CSS 规则 : 


p.custom sub {font-size:60%; vertical-align:-.4em;} 
p.custom sup {font-size:65%; vertical-align:.65em;} 
p.customsmall {font-size:.8em; vertical-align:1em;} 


就 可 以 得 到 如 图 4-13 下 面 所 示 的 效果 。 


Default sub and sup styles 


Enjoy mountain spring H20. It's 105 times better than tap! water! 
T This means water provided through a municipal distribution system 


Custom sub and sup styles 


Enjoy mountain spring H;O. It's 10° times better than tap! water! 
T This means water provided through a municipal distribution system 





图 4-13 ”上 标 和 下 标的 垂直 位 置 和 字体 大 小 都 不 一 样 


虽然 HTML 标签 <sup> 和 <sub> 有 默认 的 上 标 和 下 标 样 式 ， 但 重新 设 定 一 下 
vertical-align 和 font-size 属性 能 得 到 更 美观 的 效果 。 





目前 我 们 已 经 介绍 完了 CSS 字体 和 文本 属性 ， 接 下 来 该 讲 一 讲 让 网 页 下 载 字体 了 。 


Web 字体 大 揭秘 


目前 ， 使 用 efont-face 规则 在 网 页 中 舱 入 可 下 载 字 体 的 CSS 功能 ， 已 经 得 到 了 浏览 
器 广泛 支持 。 


Gfont-face 规则 为 设计 师 提供 了 系统 自 带 字 体 以 外 的 广泛 选择 。 换 句 话说， 浏览 带 
可 以 从 Web 服务 带 下 载 字 体 ， 就 意味 着 不 必 再 依赖 用 户 机 咒 中 的 字体 ， 而 且 也 可 以 





4.3 Web 字体 大 揭秘 


确保 用 户 能 够 看 到 CSS 中 设 定 的 字体 。 
设 定 Web 字体 的 方式 有 以 下 三 种 。 
口 使 用 Google Web Fonts 或 Adobe 的 Typekit 等 公共 字体 库 。 


口 使 用 事先 打 好 包 的 efont-face 包 。 
口 使 用 Font Squirrel 用 你 自己 的 字体 生成 efont-face 包 。 


下 面 ， 我 们 从 最 简单 的 方法 一 一 使 用 字体 库 ， 开 始 介绍 。 


4.3.4 ”公共 字体 库 


Google Web Fonts 和 Adobe 的 Typekit 是 目前 最 大 的 两 个 在 线 公 共 字 体 库 ， 前 者 托管 
AKA 500 多 类 字体 ， 后 者 包含 739 个 字体 族 ， 以 订购 方式 提供 访问 。 这 两 个 字体 
库 的 用 户 界 面 都 十 分 友好 。 


来 看 看 Google Web Fonts 的 使 用 步骤。 打开 http://www.google.com/webfonts， 找 到 想 
要 的 字体 ， 单 击 Add to Collection 按钮 ， 然 后 单 击 页 面 底 部 的 Use 按钮 ( 如 图 4-14 
所 示 )。 然后，Google 就 会 生成 一 个 指向 你 刚刚 选 定 字体 的 <link> 标 签 ， 直 接 把 它 复 
制 粘贴 到 你 的 HTML 文件 中 即 可 。 


eoo Google Web Fonts 


(«|») ( + | Bnitp:/ /www.google.com/webfonts; e 


Zu 
\ 


Google web fonts œ 








Early Access About New to Google Web Fonts? 


E Word Sentence Paragraph Poster @ Bookmark your Collection + Download your Collection 
Showing 
1 Preview Text: | It's easy to add fonts t | Size: 28 | px Sorting: | Trendi 
font family 
Norma! 400 fuse this style 







Search: 


Jis easy to add. fonts to your page with Google Web Fonts 





niconne 





Filters: Niconne, 1 Style by Vernon Adams Œ Quick-use p Popout | Remove from Colection 









All categories 





1 font family in your Collection x BE Review Use 


Vliconne Normal 400 X 


如 


4-14 Google 已 经 把 Niconne 字体 放 到 我 的 集合 里 ， 然 后 它 会 给 我 生成 一 个 指向 该 字体 的 链接 


一 行 代码 可 以 链接 多 款 字体 。 比 如 下 面 这 个 <Link> 标 签 就 引用 了 Anton, Niconne 和 
Prata 字体 。 
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«link hrefz'http://fonts.googleapis.com/css?family-Anton|Niconne|Prata' 
rel-'stylesheet' type='text/css'> 


把 这 个 链接 添加 到 页 面 的 <head> 标 签 中 之 后 ， 就 可 以 像 使 用 其 他 字体 一 样 使 用 这 些 
Web 字体 了 。 用 户 打开 网 页 时 ， 浏 览 器 就 会 从 Google 的 服务 器 得 到 相应 字体 。 比 如 


h3 (font: 20px "Prata", serif;} 


的 效果 如 图 4-15 所 示 。 


This text is set in the Prata font. 





图 4-15 ”用户 可 以 看 到 Prata 字体 的 标题 了 


在 线 字 体 库 能 够 迅速 而 有 效 地 扩展 有 限 的 系统 字体 。 在 页 面 中 使 用 Google 字体 就 是 
几 分 钟 的 事 儿 ， 而 且 关 键 是 这 样 一 来 ， 你 的 用 户 就 真 的 能 看 到 你 设 定 的 字体 了 。 


4.3.2 打包 的 @font-face 包 
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在 网 页 中 嵌入 字体 的 第 二 种 方式 是 使 用 efont-face 规则 ， 前 提 是 可 以 从 你 的 网 站 或 
第 三 方 Web 服务 器 下 载 到 相应 的 字体 。 以 这 种 方式 提供 的 字体 ， 会 在 使 用 该 字体 的 
页 面 第 一 次 加 载 时 被 浏览 器 下 载 并 缓存 起 来 ， 以 后 就 不 用 下 载 了 。 但 是 ， 除 了 显示 
网 页 之 外 ， 用 户 不 能 将 这 种 字体 用 于 其 他 用 途 。 


使 用 efont-face 规则 相对 来 说 要 麻烦 一 点 ， 不 过 却 能 做 到 想 用 什么 字体 就 用 什么 字 
体 。 字 体 一 般 都 有 许可 限制 ， 你 要 么 花 钱 买 字体 ， 要 么 选择 不 需要 付 钱 且 允许 谍 人 
网 页 的 字体 。 


使 用 efont-face 的 一 个 问题 是 不 同 浏览 器 要 求 的 字体 格式 不 一 样 。 比 如 ，Firefox、 

Webkit 核心 的 浏览 器 ( Safari 和 Chrome ), 以 及 iOS 4.1 版 之 后 的 移动 Safari 使 用 OTF 
( OpenType ) 或 TTF ( TrueType ) 字体 。Internet Explorer 使 用 EOT ( Embedded 
OpenType ) 53h, iOS 4.1 之 前 版 本 中 的 移动 Safari 以 及 其 他 浏览 器 使 用 SVG 
( Scalable Vector Graphics ) 格式 。 虽 然 字 体格 式 不 同 ,但 它们 往往 以 现成 的 字体 包 的 
形式 存在 ,或 者 可 以 使 用 本 地 字体 来 生成 字体 包 ( 提醒 你 一 下 ， 自 己 生成 字体 包 首 
先 要 获得 许可 )。 


Font Squirrel ( http://www.fontsquirrel.com ) 提供 了 很 多 现成 的 字体 包 ， 每 个 字体 包 中 
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都 包含 所 有 必要 格式 的 字体 和 为 每 款 浏 览 器 提供 正确 格式 的 CSS 代码 。Font Squirrel 
还 有 一 个 转换 程序 ， 能 够 把 你 上 传 的 字体 转换 成 字体 包 。 


下 面 就 是 Font Squirrel 为 Ubuntu Titling Bold 字体 生成 的 @font-face 代码 。 对 于 其 他 
来 源 的 字体 ， 这 种 格式 也 是 适用 的 。 


Qfont-face { 

/* 这 就 是 将 来 在 字体 栈 中 引用 的 字体 族 的 名 字 */ 

font-family: 'UbuntuTitlingBold'; 

src: url('UbuntuTitling-Bold-webfont.eot'); 
src: url('UbuntuTitling-Bold-webfont.eot?iiefix') 
format('embedded-opentype'), 
url('UbuntuTitling-Bold-webfont.woff') 
format('woff'), 
url('UbuntuTitling-Bold-webfont.ttf') 
format('truetype'), 
url('UbuntuTitling-Bold-webfont. 
svgitUbuntuTitlingBold') format('svg'); 

font-weight: normal; 

font-style: normal; 


} 


把 以 上 代码 添加 到 网 页 中 之 后 ， 就 可 以 使 用 font-family 以 常规 方式 引用 该 字体 了 。 
引用 字体 时 要 使 用 @font-face 规则 中 font-family 属性 的 值 作为 字体 族 的 名 字 。 





> OA ORC PARES DNUET 
1 万 一 安装 了 同名 字体 时 也 不 会 混淆 ， 详 细 内 容 请 参考 这 篇 文章 : http;/paulirish.com/ 
2009/bulletproof-font-face-implementation-syntax/。 


4.3.3 ”生成 @font-face 包 


有 了 时候 ， 你 可 能 希望 在 自己 的 网 页 中 使 用 一 种 特殊 字体 ， 比 如 客户 自己 公司 指定 了 
一 种 字体 ， 必 须 用 在 网 站 和 设计 中 。 今天 ， 只 要 你 获得 了 把 该 字体 转换 为 Web 字体 
使 用 的 授权 ( 请 查看 许可 协议 或 联系 字体 设计 商 )， 就 可 以 使 用 Font Squirrel 的 转换 
程序 (http:/www.fontsquirrel.comyfontface/generator ) 把 它 转换 成 efont-face 字体 包 。 
只 要 简单 几 步 ， 几 分 钟 时 间 ， 就 可 以 得 到 一 个 能 放 到 你 自己 Web 服务 器 上 供 下 载 的 
@font-face 字体 包 。 
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如 果 想 深入 理解 @font-face 规则 ， 建 议 读 一 读 Tim Brown 的 博客 文章 “How to use 
(Q)font-face": http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/。 


在 讨论 设计 文字 版 式 的 例子 之 前 ， 还 有 两 件 事 要 跟 大 家 交待 。 除 非 所 有 浏览 器 都 统 
一 支持 一 种 字体 格式 (很 可 能 是 OpenType )， 否 则 我 们 必须 得 面 对 多 种 字体 格式 并 
存 的 问题 。 关 于 多 种 字体 格式 的 @font-face 规则 如 何 写 ， 以 及 如 何 保 证 Internet 
Explorer 取得 必要 的 .eot 格式 的 字体 ， 可 以 参考 Fontspring 博客 的 文章 : 

http://www.fontspring.com/blog/fixing-ie9-font-face-problems, Fontspring 也 销售 字体 ， 
允许 以 @font-face 方式 使 用 。 


从 Web 诞生 的 那 一 天 起 ， 设 计 师 能 够 在 PC 和 Mac 上 使 用 的 字体 就 是 有 限 的 (使 用 
独特 的 字体 需要 太 多 的 额外 努力 ), 经 过 长 久 的 等 待 ， 所 有 浏览 器 一 一 包括 IE9 及 更 
高 版 本 ， 终 于 都 支持 efont-face 了 。Web 设计 师 从 此 也 能 像 平面 设计 师 一 样 随心 所 
欲 地 使 用 字体 了 。 对 于 那些 不 支持 efont-face 的 旧版 本 浏览 器 ， 解 决 办 法 也 简单 ， 
就 是 在 字体 栈 中 同时 列 出 那些 用 户 机 器 中 最 可 能 有 的 字体 ， 最 好 是 紧 跟 在 首选 的 衣 
入 字体 之 后 。 


文字 版 式 


现在 该 检验 一 下 我 们 实际 应 用 字体 和 文本 样式 的 能 力 了 。 在 本 章 最 后 这 一 他 ， 我 们 
要 动手 循序 渐进 地 做 三 个 网 页 排版 的 例子 。 


文字 排版 讲求 匀称 ， 一般 是 由 看 不 见 的 网 格 ， 框 定 页 面 文字 的 走向 和 布局 。 义 称 的 
版 式 可 以 增强 页 面 的 可 读 性 。 


下 面 我 们 先 来 看 一 个 基本 的 、 简 单 的 例子 。 在 这 个 例子 中 ， 我 们 先 不 用 网 格 ， 只 是 
基于 元 素 中 的 字体 大 小 按 比 例 地 设 定 元 素 间 距 。 这 个 练习 可 以 告诉 你 怎么 高 效 地 实 
现 想 要 的 效果 。 


4.4.1 简单 的 文本 布局 
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我 们 在 第 1 章 就 已 经 介绍 过 了 ， 浏 览 圳 为 标题 、 段 落 、 列 表 及 其 他 元 素 默 认 应 用 的 
字体 大 小 并 不 一 致 ， 而 且 垂 直 外 边 距 也 太 大 。 为 了 示范 怎么 覆盖 默认 样式 ， 获 得 匀 
称 的 版 面 ， 需 要 以 下 包含 常用 文本 元 素 的 HTML 标记 。 








4.4 文字 版 式 


«article» 
«h1»CSS«/h1» 
«p»CSS stands for Cascading Style Sheets. CSS controls the presentational 
aspects of your Web pages.«/p» 
«h2»Block-Level Elements«/h2» 
«p»Block-level elements stack down the page. They include:«/p» 
«ul» 
«li»«code»header«/code»«/li» 
«li»«code»section«/code»«/li» 
«li»«code»hi, h2, etc.«/code»«/li» 
«/ul» 
«h2»Inline Elements«/h2» 
«p»Inline elements sit next to each other, if there is room. They include:«/p» 
«ul» 
«li»«code»img«/code»«/li» 
«li»«code»a«/code»«/li» 
«li»«code»em«/code»«/1li» 
«/ul» 
«blockquote» 
«q»Typography maketh the Web site.«/q»«cite»CWS«/cite» 
«/blockquote» 
«/article» 


图 4-16 J&zs T VÀ. EPRE NI Bde P ERRORS o 


eoo Basic Text Layout 
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CSS 
CSS stands for Cascading Style Sheets. CSS controls the presentational aspects of your Web pages. 
Block-Level Elements 
Block-level elements stack down the page. They include: 
* header 


* section 
© hl, h2, etc. 


Inline Elements 


Inline elements sit next to each other, if there is room. They include: 


"Typography maketh the Web site." CWS 





4-16 ”没有 添加 样式 的 标记 没有 什么 吸引 力 
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下 面 我 们 来 写 一 些 样 式 ， 让 版 面 看 起 来 更 舒服 。 首 先 ， 去 掉 元 素 的 外 边 距 ， 设 定 主 
字体 大 小 , 为 包含 所 有 文本 元 素 的 article 应 用 样式 , 从 视觉 上 突出 它 作为 容器 的 角 
色 ， 然 后 将 它 在 页 面 上 居中 。 

/* 删 除 所 有 元 素 的 外 边 距 */ 

* {margin:0; padding:0;} 

/* 设 定 主 字 体 族 和 字体 大 小 */ 

body {font:1.0em helvetica, arial, sans-serif;} 

/* 居 中 显示 金子 */ 

article {width:500px; margin:20px auto; padding:20px; border:2px solid #999;} 
值 为 1.0em 的 font-size 只 是 显 式 地 声明 了 默认 字体 大 小 ,并 没有 修改 什么 。 但 为 了 
将 来 修改 页 面 中 所 有 文本 的 字体 更 方便 ,必须 在 font 简写 属性 中 同时 设 定 字 体 大 小 ， 
而 且 要 使 用 相对 单位 em, 


图 4-17 展示 了 此 时 在 浏览 器 中 看 到 的 结果 。 


eoo Basic Text Layout 
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CSS 
CSS stands for Cascading Style Sheets. CSS controls the 
presentational aspects of your Web pages. 
Block-Level Elements 
Block-level elements stack down the page. They include: 
* header 
* section 
* hl, h2, etc. 
Inline Elements 
Inline elements sit next to each other, if there is room. They include: 
* img 
ea 


* em 


"Typography maketh the Web site." CWS 








图 4-17 ”删除 默认 的 外 边 距 显著 减少 了 内 容 的 高 度 


接 下 来 ， 需 要 巧妙 地 安排 一 下 元 素 间 的 垂直 距离 。 男 外 ， 去 掉 默 认 外 边 距 后 列表 项 
目的 符号 也 跑 到 了 外 面 ， 这 里 一 块 儿 修复 。 





/* 标 题 周围 的 空白 */ 

h1, h2, h3, h4, h5, h6 {line-height:1.15em; margin-bottom:.1em;} 
/* 文 本 元 素 周围 的 空白 */ 

p, ul, blockquote {line-height:1.15em; margin-bottom:.75em;) 

/* 缩 进 列表 */ 

ul {margin-left:32px;} 


4.4 文字 版 式 


eoo Basic Text Layout 
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CSS 
CSS stands for Cascading Style Sheets. CSS controls the 
presentational aspects of your Web pages. 
Block-Level Elements 
Block-level elements stack down the page. They include: 
* header 
* section 
* hl, h2, etc. 
Inline Elements 
Inline elements sit next to each other, if there is room. They include: 


* img 


* em 


"Typography maketh the Web site." CWS 








图 4-18 为 段落 下 方 添加 了 空白 


如 图 4-18 所 示 ， 我 们 把 所 有 元 素 的 行 高 都 缩小 了 ， 让 它们 只 比 文 本 稍微 高 一 点 点 。 
为 什么 呢 ? 因为 line-height 会 平均 分 布 在 文本 上 下 , 而 我 只 想 通 过 下 外 边 距 在 每 个 
元 素 下 方 添加 空白 。 但 同时 ， 还 要 留 出 少量 行 高 ， 以 防 段落 〈 和 路 行 的 标题 ) 中 相 
邻 的 行 紧 挨 上 。 

为 此 ， 这 里 只 设 定 了 两 处 外 边 距 ， 而 实际 的 空白 要 相对 于 元 素 的 字体 大 小 来 计算 。 


标题 的 下 外 边 距 非常 小 (等 于 各 自 字体 大 小 的 10% ), 因此 后 面 的 文本 会 离 它 很 近 。 文 
本 元 素 的 下 外 边 距 大 一 些 ( 等 于 各 自 字 体 大 小 的 75% )， 以 便 布 局 中 有 较 明 显 的 空白 。 


最 后 ， 我 想 让 各 级 标题 也 更 均衡 一 些 ， 保 证 较 大 的 标题 突出 ， 最 小 的 标题 也 不 至 于 
不 明显 ， 同 时 也 增 大 了 code 元 素 的 字体 。 








/* 调 整 标题 文本 */ 

h1 {font-size:1.9em;} 
h2 {font-size:1.6em;} 
h3 {font-size:1.4em;} 
h4 {font-size:1.2em;} 
hs {font-size:1em;} 

h6 (font-size:.9em;) 
/# 调 整 段落 文本 */ 

p (font-size:.9em;) 

/* 调 整 代码 文本 (默认 值 太 小 了 ) */ 
code (font-size:1.3em;) 
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eoo Basic Text Layout 
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CSS 


CSS stands for Cascading Style Sheets. CSS controls the presentational 
aspects of your Web pages. 
Block-Level Elements 
Block-level elements stack down the page. They include: 
* header 
* section 
e hl, h2, etc. 


Inline Elements 

Inline elements sit next to each other, if there is room. They include: 
e img 
.a 
* em 


"Typography maketh the Web site." CWS 








图 4-19 ”标题 和 代码 都 加 大 了 ， 而 且 页 面 也 更 有 层次 感 

这 个 例子 虽然 又 简单 又 基础 ， 但 它 却 展示 了 如 何 通过 最 少量 的 文本 样式 来 提高 页 面 
版 式 的 专业 水 准 和 内 容 的 可 读 性 ， 最 终结 果 如 图 4-19 所 示 。 下 面 我 们 再 看 看 怎么 借 
助 网 格 来 创造 出 更 有 吸引 力 的 页 面 布局 。 





4.4.2 ”基于 网 格 排 版 
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借助 网 格 可 以 保证 布局 匀称 ， 同 时 让 页 面 看 起 来 也 很 流畅 。 因 为 本 章 主要 介绍 网 页 
版 式 ， 所 以 我 们 只 讨论 借助 网 格 创建 各 直 的 文本 流 。 





在 下 面 的 例子 中 ,我 会 基于 垂直 的 18 像素 网 格 来 规划 布局 ， 并 让 页 面 中 的 每 一 个 元 
素 都 按 网 格 线 对 齐 。 还 记得 可 以 在 元 素 的 背景 上 添加 图 片 吧 ， 我 们 可 以 临时 在 body 
元 素 的 背景 上 添加 一 张 图 片 ， 让 它 为 整个 页 面 生成 辅助 线 。 





我 使 用 Adobe Fireworks ( 你 可 以 选择 自己 最 称 手 的 软件 ) 创建 了 一 个 100 x 18 像素 
的 矩形 ， 并 在 它 的 底部 画 了 一 条 灰 线 。 然 后 将 其 保存 为 .png 格式 ( .jpg 或 .gf 格式 也 
没有 问题 )， 并 命名 为 grid_18px.png.， 图 4-20 展示 了 这 张 图 片 (为 清楚 起 见 ， 我 把 
它 放 在 了 一 个 深 色 背景 上 )。 





图 4-20 ”用 作 页 面 青 景 的 小 拼 贴 图 ， 长 方形 底部 有 一 条 灰 线 


4.4 文字 版 式 


把 这 张 图 片 放 到 body 元 素 的 背景 上 


/* 添 加 网 格 线 */ 
body {background-image:url(images/grid 18px.png);} 


后 它 就 会 像 贴 瓷砖 一 样 “ 贴 ” 满 了 整个 页 面 ， 如 图 4-21 所 示 。 





eoo Stylin' Text on a Grid 
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图 4-21 79 body 元 素 应 用 横 格 背景 ， 以 便 垂 直 排版 文字 
生成 水 平 的 网 格 背景 后 ， 就 可 以 依照 网 格 来 定位 文本 元 素 了 。 


这 个 例子 只 使 用 了 一 些 常 见 的 文本 元 素 ， 但 只 要 理解 了 背后 的 原理 ， 写 出 一 个 让 
HTML 文本 元 素 “对 章 网 格 ” 的 样式 表 一 点 也 不 难 。 而 有 了 这 样 的 样式 表 ， 整 个 网 
站 的 布局 就 有 了 基础 。 


这 个 例子 包含 如 下 所 示 的 简单 段落 : 
«p»In traditional typography, text is composed..«/p» 
CSS 规则 如 下 : 


/* 去 掉 所 有 元 素 的 内 边 距 和 外 边 距 */ 

* {margin:0; padding:0;} 

body { 
/* 添 加 网 格 背 景 */ 
porem image:url(images/grid 18px.png); 

IHR ARS I 

font:100% helvetica, arial, sans-serif; 
/* 加 宽 左 右 外 边 距 ， 得 到 一 栏 的 锥 形 */ 
margin:O 40px 0; 

} 

p t 
/* 设 定 字 体 大 小 */ 
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font-size:13px; 

/* 将 行 高 设 定 为 等 于 网 格 高 */ 

line-height:18px; 
} 
注意 ， 这 里 把 文本 的 line-height 设 定 为 网 格 间 的 距离 一 一 18 像素 。 在 去 掉 默 认 外 
边 距 和 内 边 距 的 情况 下 ， 这 样 就 可 以 确保 每 一 行 都 相距 18 像素 ， 如 图 4-22 所 示 。 


eoo Stylin' Text on a Grid 
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In traditional typography, text is composed to create a 
readable, coherent, and visually satisfying whole that works 
invisibly, without the awareness of the reader. 





图 4-22 18 像素 的 行 高 让 文本 行 的 间距 与 网 格 间距 恰好 一 致 


Fir £d body 元 素 添加 4 像素 的 内 边 距 ， 以 便 把 元 素 向 下 推 到 文本 基线 与 网 格 对 齐 
的 位 置 。 只 要 让 第 一 个 元 素 与 网 格 对 齐 , 其 他 元 素 就 都 能 对 齐 了 。 实际 上 , 我 给 body 
上 方 添加 了 22 像素 (4+18 ) 的 内 边 距 ， 以 便 上 方 能 有 一 定 的 空间 : 


padding-top:22px; 
之 后 ， 给 段落 添加 一 条 声明 : 


p t 
/* 设 定 字 体 大 小 */ 
font-size:13px; 
/* 把 行 高 设 定 为 等 于 网 格 高 度 */ 
line-height:18px; 
margin-bottom:18px; 





} 

这 条 声明 恰好 能 在 每 个 段落 之 间 加 上 一 个 空 行 。 再 加 上 一 段 文本 ， 就 能 更 清楚 地 看 
这 两 处 修改 的 效果 了 见 图 4-23 )。 

现在 ， 文 本 与 网 格 对 齐 了 ， 段 落 之 间 的 间距 也 合适 了 。 接 着 要 设 定 其 他 文本 元 素 的 
字体 大 小 。 首 先 把 ns 设 定 为 18 像素 ， 而 为 了 让 它 恰 好 在 网 站 中 占 一 行 ， 必 须 得 把 
它 的 line-height 也 设 定 为 18 像素 。 为 了 测试 ， 我 们 在 两 段 之 间 加 入 一 个 标签 。 
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eoo Stylin' Text on a Grid 
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In traditional typography, text is composed to create a 
readable, coherent, and visually satisfying whole that works 
invisibly, without the awareness of the reader. 





The ubiquity of type has led typographers to coin the phrase 
"Type is everywhere". 





图 4-23 为 body 添加 了 内 边 距 之 后 ， 文 本 与 网 格 完美 地 对 齐 了 


<p>In traditional typography, text is composed:::</p> 
«h3»Type for Every Use«/h3» 
<p>The ubiquity of type has led typographers---«/p» 


针对 这 个 标题 的 CSS 规则 如 下 : 
h3 (font-size:18px; line-height:18px;) 


eoo Stylin' Text on a Grid 
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In traditional typography, text is composed to create a 
readable, coherent, and visually satisfying whole that works 
invisibly, without the awareness of the reader. 





Type for Every Use 
The ubiquity of type has led typographers to coin the phrase 
"Type is everywhere". 





4-24 h3 元 素 的 基线 比 网 格 线 稍微 低 一 点 


如 图 4-24 所 示 ， 标 题 的 基线 比 网 格 低 几 个 像素 。 然 而 奇怪 的 是 ， 下 方 的 段落 并 没有 
因此 向 下 挪动 相应 距离 。 这 是 为 什么 呢 ?” 因 为 标题 的 line-height 是 正确 的 , 只 是 由 
于 它 现 在 的 字体 大 小 以 及 字体 的 因素 ， 导 致 文本 在 内 部 稍微 有 一 点 偏 移 。 纠 正 这 个 
问题 的 CSS 如 下 : 


h3 ( 
font-size:18px; 
line-height:18px; 
margin-top:-2px; 
margin-bottom:2px; 
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上 方 的 负 外 边 距 把 文本 向 上 拉 ， 下 方 同样 数量 的 正 外 边 距 用 来 抵消 它 ， 保 证 后 面 元 
素 的 位 置 不 受 影响 ( 参见 图 4-25 )。 


eoo Stylin' Text on a Grid 
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In traditional typography, text is composed to create 
a readable, coherent, and visually satisfying whole 
that works invisibly, without the awareness of the 
reader. 





Type for Every Use 
The ubiquity of type has led typographers to coin the 
phrase "Type is everywhere". 








图 4-25 ”少许 上 负 外 边 距 和 同等 数量 的 下 正 外 边 距 把 标题 提升 到 了 恰好 与 网 格 对 齐 的 位 置 


我 们 还 需要 一 种 类 似 技 巧 来 对 齐 比 网 格 高 的 元 素 ( 通常 是 标题 )。 为 此 ， 要 添加 一 个 
24 像素 的 hi 元 素 。 显 然 ，24 像素 的 文本 占据 的 空间 比 一 行 网 格 要 高 ， 因 此 给 它 设 
定 的 line-height 是 36 像素 ,也 就 是 两 行 网 格 的 高 度 。 然 后 ， 就 是 把 hi 元 素 放 到 它 
应 该 出 现 的 地 方 一 一 页 面 的 开头 。 


«hi»Typography«/h1» 
<p>In traditional typography---«/p» 


当前 给 它 设 定 的 CSS 如 下 : 
h1 (font-size:24px; line-height:36px;) 


eoo Stylin' Text on a Grid 
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Typography 
In traditional typography, text is composed to create a 


readable, coherent, and visually satisfying whole that works 
invisibly, without the awareness of the reader. 


Type for Every Use 
The ubiquity of type has led typographers to coin the phrase 
"Type is everywhere". 








图 4-26 EHT line-height 等 于 两 倍 网 格 行 高 ， 所 以 标题 没有 在 网 格 线 上 


4.4 文字 版 式 


这 个 占 两 行 网 格 的 大 标题 看 起 来 不 太 舒 服 。 如 果 把 它 移动 到 下 方 最 近 的 线 上 ， 那 么 
其 字母 下 伸 部 分 就 会 接触 到 段落 文本 ， 所 以 我 要 把 它 向 上 移动 。 经 过 一 番 试 错 ， 我 
决定 把 它 向 上 移动 13 像素 。 





另 一 种 思路 是 把 标题 文本 的 基线 放 在 两 行 网 格 线 之 间 一 半 的 位 置 。 那 会 实现 一 种 不 
同 的 风格 。 不 过 ， 无 论 如 何 都 要 保证 后 面 的 元 素 与 网 格 对 齐 。 


h1 { 
font-size:24px; 
line-height:36px; 
margin-top:-13px; 
margin-bottom: 13px; 


} 

这 样 ,hi 下 方 与 文本 之 间 就 空 出 了 一 定 距 离 (参见 图 4-27 )。 对 于 级 别 低 一 点 的 标题 
也 可 以 应 用 同样 的 技巧 ， 但 我 个 人 还 是 倾向 于 认为 标题 与 其 下 方 元 素 再 接近 一 些 才 
舒服 。 

















eno Stylin' Text on a Grid 
«|» Jls e Ma- ) 
Typography 


In traditional typography, text is composed to create a 
readable, coherent, and visually satisfying whole that works 
invisibly, without the awareness of the reader. 


Type for Every Use 
The ubiquity of type has led typographers to coin the phrase 
"Type is everywhere". 





4-27 ”hl 元 素 的 基线 与 网 格 线 对 齐 了 

在 这 个 练习 最 后 ， 我 们 再 加 几 个 不 同 字 体 大 小 的 标题 、 一 个 无 序列 表 和 一 个 
blockquote 元 素 。 看 一 看 把 网 格 去 掉 之 后 页 面 是 什么 样子 。 

这 个 练习 的 HTML 代码 可 以 在 本 书 网 站 下 载 : http:Wwww.stylinwithcss.com。 


* {margin:0; padding:0;} 

body {font:100% helvetica, arial, sans-serif; backgroundimage: 
url(images/grid 18px.png); margin:O 20px 0; 

padding:21px;) 
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p {font-size:14px; line-height:18px; margin-bottom:18px;} 

h1 {font-size:24px; line-height:36px; margin-top:-13px; 
margin-bottom:13px;] 

h2 (font-size:18px; line-height:18px; margin-top:-2px; 
margin-bottom:2px;] 

h3 (font-size:16px; line-height:18px; margin-top:-2px; 
margin-bottom:2px;] 

ul (margin-bottom:18px;] 

li (font-size:13px; list-style-type:none; padding:O 20px; 
line-height:18px;] 

a {color:#777; text-decoration:none;) 

blockquote (font-size:12px; line-height:18px; paddingtop: 

2px; margin-bottom:16px;] 





eoo Stylin' Text on a Grid 
nn ce 
Typography 


In traditional typography, text is composed to create a 
readable, coherent, and visually satisfying whole that 
works invisibly, without the awareness of the reader. 


Since digitization, typography has spread to a wider 
ranger of applications, appearing on web pages, LCD 
mobile phone screens, and hand-held video games. The 
ubiquity of type has led typographers to coin the phrase 
"Type is everywhere". 


Typography is Everywhere 
Bo 


and Magazines 








Po 
Apparel 
Graffiti 


everywhere you look 
"Typography is what language looks like." Ellen Lupton 


Type for Every Use 

Prose fiction, non-fiction, editorial, educational, 
religious, scientific, spiritual and commercial writing all 
have differing characteristics and requirements of 
appropriate typefaces and fonts. 


Type over Time 

For historic material established text typefaces are 
frequently chosen according to a scheme of historical 
genre acquired by a long process of accretion, with 
considerable overlap between historical periods. 





图 4-28 基于 18 像素 网 格 的 页 面 布局 
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如 图 4-28 所 示 ， 利 用 网 格 辅助 排版 之 后 的 布局 还 是 不 错 的 。 从 技术 角度 讲 ， 如 果 你 
基于 网 格 为 一 个 网 站 设计 了 版 式 ， 而 后 将 其 交 给 了 其 他 人 维护 ， 那 这 个 网 站 的 版 式 
就 能 始终 保持 一 致 ， 无 论 页 面 中 包含 什么 元 素 ， 以 及 以 什么 顺序 包含 这 些 元 素 。 


4.4.3 经典 的 排版 练习 


本 章 最 后 ， 我 们 节选 The Hound of the Baskervilles 以 巴 斯 克 维尔 庄园 的 猎犬 》) “中 
的 部 分 文本 (为 了 示例 需要 进行 了 删 减 ) 来 做 一 个 排版 练习 。 这 个 练习 将 会 用 到 本 
章 讲 过 的 很 多 字体 和 文本 属性 。 完 成 这 个 练习 后 ， 你 就 能 掌握 实现 专业 排版 的 很 多 
技术 ,包括 使 用 HTML 实体 、 调 整 字母 和 单词 间距 、 首 字 下 沉 、 垂 直 网 格 (这 一 次 
是 24 像 素 ) 以 及 可 下 载 字体 。 








示例 的 HTML 标记 非常 简单 ， 只 有 两 个 标题 、 几 个 段落 和 一 个 块 引用 。 


«h2»an excerpt from«/h2» 
«hi»The Hound of the Baskervilles«/h1» 

«p»Holmes stretched out his hand for the manuscript and flattened it upon 
his knee. &ldquo;You will observe, Watson, the alternative use of the 
long s and the short. It is one of several indications which enabled me 
to fix the date.&rdquo; At the head was written: &ldquo;;Baskerville 
Hall,&rdquo; and below in large, scrawling figures: &ldquo; ; 1742 .&rdquo; </p> 

«p»&ldquo;;It appears to be a statement of some sort.&rdquo;«/p» 

«p»&ldquo; ;Yes&mdash;it is a statement of a certain legend which runs in the 
Baskerville family.&rdquo;«/p» 

«blockquote» 

«q»0f the origin of the Hound of the Baskervilles there have been many 
statements, yet as I come in a direct line from Hugo Baskerville, and 
as I had the story from my father&hellip;«/q» 

«/blockquote» 

«p»When Dr. Mortimer had finished reading this singular narrative he pushed 
his spectacles up on his forehead and stared across at Mr. Sherlock 
Holmes.«/p» 


这 有 段 标记 包含 了 几 个 HTML 实体 ， 它 们 代表 的 是 几 种 标点 符号 。 其 中 ， 有 表示 对 话 
开始 的 左 双 引 号 (81dquo; ) 、 表 示 对 话 结束 的 右 双 引号 (&rdquo; )、 表 示 省 略 的 省 
略 号 (8&hellip; ) 和 表示 暂停 或 代替 括号 的 破 折 号 ( &mdash; )。 




















GD《 巴 斯 克 维 尔 庄园 的 猎犬 》 是 阿 瑟 ， 柯南 ' 道 尔 最 得 意 的 长 篇 杰作 之 一 ， 堪 称 福尔摩斯 探 案 故事 的 代表 作 。 
一 一 译 者 注 
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HTML 实体 引用 


以 下 网 站 中 列 出 了 HTML 实体 : 
http://htmlhelp.com/reference/html40/entities/special.html ; 
http://code.stephenmorley.org/html-and-css/character-entity-references-cheat-sheet 


上 面 第 一 个 链接 中 既 包含 HTML 实体 值 ， 也 包含 实体 需要 作为 : :before 和 : :after 伪 元 素 内 容 
时 的 十 六 进 制 值 。 举 个 例子 ， 如 果 你 想 在 伪 元 素 中 添加 十 六 进 制 值 #x201C;〔 左 双 引号 ) ， 则 
需要 改写 成 如 下 形式 : 


e::before {content:"\201C";} 
就 是 在 数字 前 面 加 了 一 个 反 斜 本 。 相 应 地 ， 右 双 引 号 的 十 六 进 制 值 改写 后 是 \201D。 


在 HTML 标记 中 , 必须 把 所 有 和 号 (& ) 和 小 于 号 ( < ) 都 替换 成 相应 的 HTML 实体 , 也 就 是 &amp; 
和 8&1t;。 因 为 “&” 是 实体 的 第 一 个 字符 , 而 “<” 是 HTML 标签 的 第 一 个 字符 ,它们 都 有 特殊 
售 义 。 如 果 不 替 换 的 话 ， 浏 览 器 一 看 到 它们 就 会 当成 实体 和 标签 来 解释 后 面 的 内 容 。 


第 一 步 : 设 定 字 体 和 底层 网 格 


这 两 段 文 本 使 用 的 主 字 体 是 FontSquirrel 提供 的 字体 Crimson Roman。 我 下 载 了 相应 
的 字体 包 , 放 在 了 我 Web 服务 器 上 ( 在 编写 代码 的 过 程 中 , 我 在 本 地 也 保存 了 一 份 )， 
然后 把 其 中 的 @font-face 规则 添加 到 了 样式 表 中 。 之 后 , 就 可 以 在 font-family 属性 
中 引用 该 字体 了 。 


Qfont-face { 
font-family:'CrimsonRoman' ; 
src: url('fonts/Crimson-fontfacekit/Crimson-Roman-webfont. 
eot'); 
src: url('fonts/Crimson-fontfacekit/Crimson-Roman-webfont. 
eot?#iefix') format('embedded-opentype'), 
url('fonts/Crimson-fontfacekit/Crimson-Roman-webfont. 
woff') format('woff'), 
url('fonts/Crimson-fontfacekit/Crimson-Roman-webfont. 
ttf') format('truetype'), 
url('fonts/Crimson-fontfacekit/Crimson-Roman-webfont. 
svg#CrimsonRoman') format('svg'); 
font-weight: normal; 
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font-style: normal; 
} 
* {margin:0; padding:0;} 
body { 
font-family:"CrimsonRoman", georgia, times, serif; 
background-color:ffff; 
margin:O 1076 0; 
background-image:url(grid 24px.png); 
} 


按照 我 们 的 标准 工作 流程 ， 这 里 先 去 掉 了 所 有 外 边 距 和 内 边 距 ， 设 定 了 主 字体 ， 又 
添加 了 左 、 右 外 边 距 ， 还 为 对 齐 文 本 临时 添加 了 网 格 , 结果 如 图 4-29 所 示 。 


eoo An Exercise in Classic Typography 


bale Jod e or D 











an excerpt from 


The Hound of the Baskervilles 


Holmes stretched out his hand for the manuscript and flattened it upon his knee. “You will observe, Watson, the 
alternative use of the long s and the short. It is one of several indications which enabled me to fix the date.” At the 
head was written: “Baskerville Hall," and below in large, scrawling figures: "1742." 

“It appears to be a statement of some sort." 

"Yes—it is a statement of a certain legend which runs in the Baskerville family." 

"Of the origin of the Hound of the Baskervilles there have been many statements, yet as I come in a direct line from 
Hugo Baskerville, and as I had the story from my father..." 

When Dr. Mortimer had finished reading this singular narrative he pushed his spectacles up on his forehead and 


stared across at Mr. Sherlock Holmes. 





图 4-29 ”文本 和 网 格 已 经 就 位 ， 就 等 对 齐 了 
第 二 步 : 设计 标题 


下 面 我 们 就 从 上 到 下 ， 对 齐 页 面 中 的 每 一 个 元 素 。 第 一 行 的 副标题 应 该 与 第 二 行 的 
主 标题 形成 对 比 ， 因 为 主 标 题 要 使 用 手写 字体 ， 所 以 副标题 就 设 定 成 间距 较 宽 的 小 
型 大 写字 母 。 





body { 
font-family:"CrimsonRoman", georgia, times, serif; 
background-color:ffff; 
margin:29px 1076 0; 
background-image:url(grid 24px.png); 
} 
h2 { 
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font-size:18px; 
line-height:24px; 
font-weight:bold; 
text-align:center; 
font-variant:small-caps; 
word-spacing:.5em; 
letter-spacing:.6em; 


排版 资源 


| 


http://ilovetypography.com 在 这 个 网 站 上 , 你 可 以 跟着 设计 师 John Boardley 一 起 深思 , 欣赏 每 
一 页 中 别具一格 的 排版 。 

http://www.thinkingwithtype.com 这 是 Thinking with Type 一 书 的 网 站 ， 作 者 Ellen Lupton。 网 站 
中 展示 了 很 多 漂亮 又 经 典 的 版 式 ， 还 包含 一 些 字体 及 字体 族 的 信息 。 
http;//webtypography.net 这 个 站 点 自称 为 The Elements of Typographic Style Applied to the 


Web 一 A practical guide to web typography。 跟 随 网 站 的 目录 , 可 以 找到 各 种 常用 的 排版 知识 和 
技巧 。 


首先 ， 我 们 用 font-variant 把 副标题 转换 成 小 型 大 写字 母 ， 然 后 应 用 word-spacing 
和 letter-spacing 得 到 预期 结果 ， 如 图 4-30 所 示 。 


AN EXCERPT FROM 


The Hound of the Baskervilles 
图 4-30 “副标题 不 仅 与 网 格 对 齐 ， 而 且 也 应 用 了 字体 和 文本 属性 


接 下 来 ， 打 开 Google Web Fonts 网 站 ， 找 到 一 种 名 为 Pinyon 的 手写 体 ， 这 种 字体 与 
主 标 题 挺 配 的 。 然 后 ， 把 Google Web Fonts 生成 的 <link> 标 签 复 制 粘贴 到 HTML 文 
档 的 <head> 标 签 里 ,， 这样 就 能 在 font-family 声明 中 引用 这 种 字体 了 。 这 里 仍然 需要 
用 到 图 4-25 中 曾 用 过 的 “ 负 / 正 外 边 距 ”技巧 ,把 主 标题 移动 到 恰好 与 网 格 对 齐 ， 得 
到 的 效果 如 图 4-31 所 示 。 





«link hrefz'http://fonts.googleapis.com/css?family-PinyonrScript' 
rel-'stylesheet' type='text/css'> 

h1 { 
font-size:60px; 
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line-height:96px; 

font-family:"Pinyon Script", cursive; 
margin:4px 0 -4px; 

text-align:center; 
font-weight:normal; 
position:relative; 


} 
、 
Y line-height 是 网 格 宽度 的 4 倍 。 


EXCERP T FROM 





图 4-31 主 标题 已 经 应 用 了 样式 ， 并 与 网 格 对 齐 了 
第 三 步 : 设计 段落 和 引用 
第 一 段 的 位 置 有 点 高 ， 因 此 我 们 设 定 它 的 字体 大 小 ， 以 及 一 一 更 重要 的 是 设 定 它 的 


Z= 


ÍT o 
p (font-size:18px; line-height:24px;] 
Holmes stretched out his hand for the manuscript and flattened it upon his knee. "You will observe, 


Watson, the alternative use of the long s and the short. It is one of several indications which enabled 
me to fix the date." At the head was written: "Baskerville Hall," and below in large, scrawling figures: 


“1742.” 

“It appears to be a statement of some sort." 

"Yes—it is a statement of a certain legend which runs in the Baskerville family." 

"Of the origin of the Hound of the Baskervilles there have been many statements, yet as I come in a direct line from 
Hugo Baskerville, and as I had the story from my father..." 

When Dr. Mortimer had finished reading this singular narrative he pushed his spectacles up on his 
forehead and stared across at Mr. Sherlock Holmes. 





4-32 RE line-height 让 段落 与 网 格 对 齐 


前 三 段 昌 然 对 齐 了 ， 但 后 面 的 段落 没有 ， 这 是 因为 第 三 段 后 面 的 引用 ed 

也 需要 对 齐 。blockquote 中 的 文本 包含 在 一 个 行内 元 素 q (quote) 中 ， 这 个 元 素 的 
默认 样式 是 在 文本 开头 和 末尾 加 上 引号 。 在 此 ， 我 们 来 缩 进 blockquote， 但 在 其 q 
子 元 素 上 设 定 字体 大 小 和 行 高 ， 因 为 它 才 是 包含 文本 的 元 素 : 
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blockquote (margin:Opx 20%;} 
q (font-size:18px; font-style:italic; line-height:24px;] 


Holmes stretched out his hand for the manuscript and flattened it upon his knee. "You will observe, 
Watson, the alternative use of the long s and the short. It is one of several indications which enabled 
me to fix the date." At the head was written: "Baskerville Hall," and below in large, scrawling figures: 
*1742." 


"It appears to be a statement of some sort." 
"Yes—it is a statement of a certain legend which runs in the Baskerville family." 
"Ofthe origin of the Hound of the Baskervilles there have 
been many statements, yet as I come in a direct line from 
Hugo Baskerville, and as I had the story from my father..." 
When Dr. Mortimer had finished reading this singular narrative he pushed his spectacles up on his 
forehead and stared across at Mr. Sherlock Holmes. 





图 4-33 引用 与 网 格 也 对 齐 了 


缩 进 引用 并 将 文本 变 成 斜体 为 页 面 增加 了 变化 。 另 外 ， 你 看 到 了 吗 ， 在 blockquote 
就 位 后 ， 它 后 面 的 段落 自然 也 就 与 网 格 对 齐 了 。 





第 四 步 : 首 字 下 沉 效 果 


现在 ， 我 们 打算 给 第 一 段 添加 一 个 独特 的 首 字 下 沉 效果 。 所 谓 首 字 下 沉 ， 就 是 将 段 
沙 开头 的 第 一 个 字母 变 大 ， 然 后 根据 该 字母 与 段落 首 行 的 位 置 关 系 ， 又 可 以 分 几 种 
不 同 的 风格 。 在 这 里 ， 我 们 想 让 字母 的 顶部 与 段落 首 行 项 部 对 齐 ， 让 字母 的 底部 与 
段落 第 三 行 的 基线 对 齐 。 





或 许 你 以 前 也 见 过 这 种 效果 ， 而 那些 效果 中 的 首 字母 都 被 包含 在 一 个 span 元 素 里 。 
这 种 做 法 对 于 从 内 容 管理 系统 中 动态 取 文 本 的 网 页 并 不 适用 。 所 以 ,我们 这 里 要 介 
绍 一 种 不 用 修改 标记 的 技巧 。 


为 此 , 需要 选择 hi 标题 后 面 第 一 个 段落 的 第 一 个 字母 ， 而 组 合 使 用 紧邻 同胞 选择 符 + 
fll: :first-letter 伪 元 素 可 以 做 到 。 选 择 了 第 一 个 字母 后 ， 再 增 大 字体 并 浮动 它 : 


hi + p::first-letter { 
font-family:times, serif; 
font-size: 90px; 
float:left; 
border:1px solid; 
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olmes stretched out h 
observe, Watson, the 
indications which enabled me 
large, scrawling figures: “1742.” 


4-34 ”这 里 显示 边框 是 为 了 看 清楚 首 字母 从 段落 文本 中 继承 的 line-height 有 多 高 


首 字 母 增 大 了 ,但 位 置 不 对 。 由 于 我 们 实际 上 是 想 调整 盒子 的 大 小 和 位 置 ， 所 以 首 
字母 的 边框 在 此 可 以 作为 辅助 。 而 边框 告诉 我 这 个 盒子 只 大 到 了 让 两 行文 本 绕 排 ， 
原因 是 首 字 母 继 承 了 段落 的 行 高 和 对 齐 方 式 。 我 们 需要 设 定 这 个 伪 元 素 的 
line-height， 让 它 的 盒子 能 包含 首 字 母 。 








ey 我 们 把 line-height 设 定 为 小 于 1 的 值 ， 以 便 元 素 盒子 紧 紧 包 住 首 字 母 ， 而 不 会 强迫 
段落 第 四 行 也 绕 排 。 
h1 + p::first-letter { 
font-family:times, serif; 
font-size:90px; 
float:left; 
line-height:.65; 
border:1px solid; 


olmes stretched out hi 
observe, Watson, the 
indications which ena 


below in large, scrawling figure 





4-35 “元素 盒子 长 紧 包 住 首 字母 


如 图 4-35 所 示 ， 增 大 盒子 的 line-height 后 ， 第 三 行 也 绕 排 了 。 现 在 ， 只 要 再 给 这 
个 元 素 顶 部 添加 一 点 内 边 距 ， 就 可 以 让 字母 的 底部 与 段落 第 三 行 的 基线 对 齐 了 。 
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h1 + p::first-letter { 
font-family:times, serif; 
font-size:-90px; 
float:left; line-height:.65; 
padding:.085em 3px O 0; 


我 还 添加 了 3 像素 的 右 内 边 距 ， 以 便 首 字母 与 段落 之 间 空 开 一 点 距离 。 当 然 ， 边 杠 
也 没 用 了 ， 把 它 去 掉 之 后 的 效果 如 图 4-36 Brzn 


olmes stretched out 







observe, Watson, th 
indications which en 
below in large, scrawling figur 





&]4-36 完成 后 的 首 字 母 下 沉 效果 


首 字 母 下 沉 效果 做 完了 。 可 是 ， 我 希望 大 号 首 字母 到 小 号 正文 之 间 有 一 个 过 渡 ， 所 
以 需要 把 段落 第 一 行 的 文本 变 成 小 型 大 写字 母 。 





hi + p::first-line { 
font-variant:small-caps; 
letter-spacing:.15em; 


OLMES STRETCHED OUT HIS HAND FOR THE MANUSCRIPT AND FLATTENED IT UPON 
H his knee. "You will observe, Watson, the alternative use of the long s and the short. It is one 

of several indications which enabled me to fix the date." At the head was written: "Baskerville 
Hall," and below in large, scrawling figures: “1742.” 






图 4-37 ”段落 第 一 行 变 成 了 小 型 大 写字 母 


这 一 次 同样 使 用 了 紧邻 同胞 选择 符 ， 但 组 合 的 是 : :first-line 伪 元 素 ， 实 现 了 第 一 
行 字 形 的 转换 。 使 用 伪 元 素 而 不 是 额外 加 标签 的 好 处 在 于 ， 当 行 的 长 度 改 变 时 ， 大 
写字 母 的 效果 会 随 之 扩展 。 图 4-37 展示 了 这 行 大 写字 母 在 首 字母 与 正文 之 间 起 到 的 
衔接 作用 。 














4.4 文字 版 式 


第 六 步 : 最 后 的 修饰 


段落 之 间 没 有 足够 的 间距 ， 让 人 很 难看 出 它们 的 开头 在 哪里 。 为 了 与 这 本 书 的 版 式 
保持 一 致 ， 我 们 不 给 段落 之 间 加 空白 ， 而 是 缩 进 跟 在 其 他 段落 后 面 的 每 一 段 ， 作 为 
一 组 段落 起 头 的 一 段 不 缩 进 。 此 外 ， 引 用 内 容 两 端的 引号 也 太 难 看 ， 所 以 要 在 <q> 标 
签 上 应 用 : :before 和 ::after HIR, HA Crimson 字体 的 引号 。 最 后 ， 再 从 body 
元 素 中 去 掉 网 格 背 景 ( 让 它 不 再 显示 )。 


/* 只 缩 进 跟 在 段落 后 面 的 段落 */ 

p + p {text-indent:14px;} 

/# 引 用 内 容 前 面 的 引号 #/ 

q::before {content:"\201C"} 

/# 引 用 内 容 后 面 的 引号 #/ 

q::after {content:"\201D"} 

这 几 条 声明 都 有 必要 解释 一 下 。 选 择 要 缩 进 的 段落 使 用 的 是 紧邻 同胞 选择 符 ， 以 保 
证 只 有 段落 后 面 的 段落 才 会 缩 进 。 "When Dr. Mortimer..” 开 头 的 那 一 段 ， 因 为 前 面 
是 一 个 blockquote， 不 是 段落， 所 以 就 没有 缩 进 ， 而 且 它 也 十 分 明显 就 是 一 个 段落 
的 开头 〈 参 见 图 4-38 )。 


使 用 : :before fll: :after 伪 元 素 给 引用 内 容 添 加 引号 时 使 用 的 是 十 六 进 制 值 。 在 这 里 
不 能 给 content 属性 设 定常 规 的 HTML 实体 ， 只 能 使 用 十 六 进 制 实体 值 ， 而 且 只 能 
是 改写 后 的 形式 。 关 于 HTML 实体 引用 的 详细 介绍 , 请 参考 本 节 开 头 的 那个 附注 栏 。 


eoo An Exercise in Classic Typography 
[3]»-J [x e | fa- Jj 

















AN EXCERPT FROM 


He Hound f Be Baskervilles 


OLMES STRETCHED OUT HIS HAND FOR THE MANUSCRIPT AND FLATTENED 
H it upon his knee. “You will observe, Watson, the alternative use of the long s 
and the short. It is one of several indications which enabled me to fix the 
date.” At the head was written: “Baskerville Hall,” and below in large, scrawling 
figures: “1742.” 
“It appears to be a statement of some sort.” 
“Yes—it is a statement of a certain legend which runs in the Baskerville family.” 
“Of the origin of the Hound of the Baskervilles there have 
been many statements, yet as I come in a direct line from 
Hugo Baskerville, and as I had the story from my father...” 
When Dr. Mortimer had finished reading this singular narrative he pushed his 
spectacles up on his forehead and stared across at Mr. Sherlock Holmes. 
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第 4 章 字体 和 文本 


经 过 最 后 的 修饰 ， 这 个 经 典 版 式 设计 终于 完成 了 。 对 于 节选 的 那么 几 段 文本 来 说 ， 
好 像 工 作 量 还 不 小 。 不 过 别 忘 了 ， 这 些 样 式 其 实 是 很 容易 应 用 给 整整 一 本 书 的 。 





小 结 


本 章 ， 我 们 介绍 了 与 字体 和 文本 相关 的 很 多 CSS 属性 ， 学 习 了 为 页 面 设 定 字体 的 几 
种 不 同方 式 ， 也 讨论 了 为 文本 应 用 样式 的 各 种 技巧 。 下 一 童 ， 我 们 就 在 文字 排版 的 
基础 上 更 上 一 层 楼 ， 学 习 设计 多 栏 页 面 布 局 的 技术 。 


D If) f jo) 








本 章 ， 我 们 来 学 习 多 栏 页 面 布 局 。 很 多 网 站 为 了 在 第 一 屏 尽 可 能 多 地 显示 信息 ， 都 
采用 了 多 栏 布 局 。 这 里 所 说 的 “第 一 屏 ” 就 是 用 户 无 须 滚动 就 能 看 到 的 页 面 区 域 ， 
相当 于 传统 报纸 行业 所 说 的 “ 折 痕 之 上 ”的 版 面 。 一 般 来 说 ， 两 栏 、 三 栏 ， 甚 至 四 
栏 布局 都 很 常见 。 但 无 论 几 栏 ， 每 个 页 面 都 要 涉及 一 些 关 键 技术 和 指导 思想 ， 这 些 
内 容 本 章 都 将 介绍 。 


这 一 章 会 介绍 实现 多 栏 布局 的 几 种 方法 。 主 要 介绍 “用 内 部 DIV 创建 浮动 的 栏 ”", 这 
是 多 年 来 一 直 被 业界 用 于 创建 多 栏 布局 的 经 典 技术 。 另 外 , 随 着 支持 CSS3 HDI Uds 
比例 越 来 越 高 ， 一 些 新 的 布局 技术 也 可 以 用 在 大 型 站 点 中 了 ， 本 章 当 然 不 会 忽略 这 
部 分 内 容 。 今 天 ， 我 们 不 仅 可 以 使 用 box-sizing 属性 代 蔡 内 部 DIV， 也 可 以 使 用 让 
元 素 行 为 跟 表格 一 样 的 CSS3 的 display 属性 ( 却 不 必 向 HTML 中 添加 表格 )。 因此 ， 
创建 流动 的 全 长 栏 也 变 得 简单 多 了 。 





























我 会 把 上 述 经 典 技术 和 新 技术 的 优 缺 点 都 摆 出 来 ， 还 会 告诉 大 家 对 那些 老 版 本 浏览 
器 (当然 主要 指 IE8 及 更 早 版 本 )， 有 什么 后 备 手段 和 “腻子 脚本 ” Cpolyfill) 可 以 
使 用 。 这 些 都 是 你 选择 技术 时 需要 考虑 的 。 好 吧 ， 闲 话 少 说 ， 就 从 布局 的 基本 概念 
开始 讲 吧 。 





第 5 章 页面 布局 


51 布局 的 基本 概念 


多 栏 布局 有 三 种 基本 的 实现 方案 : 固定 宽度 、 流 动 、 弹 性 。 


口 国定 宽度 布局 的 大 小 不 会 随 用 户 调整 浏览 器 窗口 大 小 而 变化 ， 一 般 是 900 到 1100 
像素 宽 。 其 中 960 像素 是 最 常见 的 ， 因 为 这 个 宽度 适合 所 有 现代 显示 器 ， 而 且 能 
够 被 16、12、10、8、6、5、4 和 3 整除 , 不仅 容 易 计 算 等 宽 分 栏 的 数量 ， 而 且 计 
算 结 果 也 能 得 到 没有 小 数 的 像素 数 。 








uU» 流行 的 CSS 布局 框架 960 Grid ( http://www.960.gs )， 就 是 基于 960 像素 宽 的 网 格 创 
建 的 。 


口 流动 布局 的 大 小 会 随 用 户 调整 浏览 器 窗口 大 小 而 变化 。 这 种 布局 能 够 更 好 地 适应 
大 屏幕 ， 但 同时 也 意味 着 放弃 对 页 面 某 些 方面 的 控制 ， 比 如 随 着 页 面 宽 度 变 化 ， 
文本 行 的 长 度 和 页 面 元 素 之 间 的 位 置 关 系 都 可 能 变化 。 Amazon.com 的 页 面 采用 的 
就 是 流动 中 栏 布局 ， 在 各 栏 宽度 加 大 时 通过 为 内 容 元 素 周 围 添加 空白 来 保持 内 容 
居中 ， 而 且 现 在 的 导航 条 会 在 布局 变 罕 到 某 个 宽度 时 收缩 进 一 个 下 拉 菜 单 中 ， 从 








而 为 内 容 腾 出 空间 。 
Q 今天 ， 越 来 越 多 的 浏览 顺 都 支持 CSS 媒体 查询 了 。 这 就 让 基于 浏览 带 窗 口 宽度 提 








供 不 同 的 CSS 样式 成 为 可 能 。 在 这 种 形势 下 , 适应 各 种 屏幕 宽度 的 可 变 固 定 布 局 ， 
正 逐 步 取代 流动 布局 。 这 种 可 变 的 固定 布局 能 够 适应 最 大 和 最 小 的 屏幕 ， 业 界 称 
之 为 响应 式 设 计 。 本 书 第 8 章 将 专门 介绍 啊 应 式 设 计 相 关 的 CSS BOR. 

O 弹性 布局 与 流动 布局 类 似 ， 在 浏览 融 窗 口 变 宽 时 ， 不 仅 布局 变 宽 ， 而 且 所 有 内 容 
元 素 的 大 小 也 会 变化 ， 让 人 产生 一 种 所 有 东西 都 变 大 了 的 感觉 。 到 目前 为 止 , 我 
还 没 见 过 设计 得 非常 好 的 弹性 布局 ， 主 要 是 因为 它 太 过 复杂 了 。 本 章 不 介绍 这 种 
布局 ， 而 只 把 笔墨 花 在 固定 宽度 布局 和 流动 布局 上 。 


下 面 ， 我 们 先 来 看 一 看 页 面 的 高 度 和 宽度 有 什么 区 别 。 


























布局 高 度 与 布局 宽度 


在 实际 地 创建 页 面 布 局 之 前 ,我 想 先 说 说 应 该 怎么 看 待 布 局 的 高 度 和 宽度 ， 因 为 这 
两 者 的 控制 方法 实在 太 不 一 样 了 。 
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5.2 


5.2 三 栏 -固定 宽度 布局 


布局 高 度 


多 数 情况 下 ， 布 局 中 结构 化 元 素 ( 力 至 任何 元 素 ) 的 高 度 是 不 必 设 定 的 。 事 实 上 ， 
我 甚至 想 告诉 你 根本 不 应 该 给 元 素 设 定 高 度 。 除 非 你 确实 需要 这 样 做 ， 比 如 在 页 面 
中 创造 一 个 绝对 定位 的 元 素 。 








为 什么 正常 情况 下 都 应 该 保持 元 素 height 属性 的 默认 值 auto 不 变 呢 ? 很 简单 ,只 有 
这 样 元 素 才能 随 自己 包含 内 容 的 增加 而 在 垂直 方向 上 扩展 。 这 样 扩展 的 元 素 会 把 下 
方 的 元 素 向 下 推 ， 而 布局 也 能 随 着 内 容 数量 的 增 减 而 垂直 伸缩 。 假 如 你 明确 设 定 了 
元 素 的 高 度 ， 那 么 超出 的 内 容 要 么 被 剪 掉 ， 要 人 么 会 跑 到 容 需 之 外 一 一 取决 于 元 素 
overflow 属性 的 设 定 。 











布局 宽度 


与 高 度 不 同 ， 我 们 需要 更 精细 地 控制 布局 宽度 ， 以 便 随 着 浏览 器 窗口 宽度 的 合理 变 
化 ， 布 局 能 够 作出 适当 的 调整 ， 确 保 文 本 行 不 会 过 长 或 过 短 。 如 果 随意 给 元 素 添加 
内 边 距 、 边 框 ， 或 者 元 素 本 身 过 大 ， 导 致 浮动 元 素 的 宽度 超过 包含 元 素 的 布局 宽度 ， 
那 浮动 元 素 就 可 能 “ 躲 ” 到 其 他 元 素 下 方 。 














当然 啦 ， 即 使 必须 设 定 栏 宽 ， 也 不 要 给 包含 在 其 中 的 内 容 元 素 设 
些 内 容 元 素 自动 扩展 到 填 满 栏 的 宽度 。 本 书 前 面 已 经 讲 过 了 ， 这 
行为 。 简 言 之 ， 就 是 让 栏 宽 限制 其 中 内 容 元 素 的 宽度 。 


以 上 这 些 细节 在 实际 地 创建 布局 时 会 更 容易 明白 。 眼 下 ， 只 要 知道 应 该 控制 布局 宽 
度 ， 而 让 内 容 决定 布局 高 度 这 个 一 般 原 则 就 好 了 。 


— op Ia ET 
三 栏 - 固 定 宽度 布局 
本 节 ， 我 来 教 你 创建 三 栏 布局 。 只 要 掌握 了 创建 三 栏 布局 的 技术 ， 你 想 搞 多 少 栏 就 


能 搞 多 少 栏 。 由 于 本 章 主要 关注 页 面 结构 ,为 了 让 大 家 直观 地 看 到 整个 过 程 到 底 发 
生 了 什么 ， 咱 们 要 给 每 个 栏 加 上 深浅 不 同 的 背景 色 。 


定 宽度 ， 应 该 让 这 
是 


块 级 元 素 的 默认 

















就 从 一 个 简单 的 居中 的 单 栏 固 定 布 局 开始 吧 。 为 了 让 布局 好 看 一 点 ， 我 写 了 一 些 简 
单 的 样式 。 为 节省 版 面 ， 我 们 没有 给 出 这 些 样式 ， 实 际 上 它们 对 本 节 要 讲 的 技术 没 
有 任何 影响 。 主 要 标记 的 ID 是 wrapper (外 包装 )， 这 个 容 需 里 包含 了 一 栏 。 
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«div id-"wrapper"» 


«article» 
<! -- 这 里 是 一 些 文本 元 素 --> 
«/article» 
«/div» 


布局 相关 的 CSS 如 下 : 


#wrapper {width:960px; margin:O auto; border:1px solid;} 
article {background:#ffed53;} 


eno Creating Columns 
EI JL e (a J 











Single-Column Layout 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus felis gravida. Etiam ultricies tristique tellus, vulputate euismod neque elementum| 
lac. Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Sed convallis accumsan dui, eu sodales 
dio mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet facilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris rutrum quis. 





|This is a Second-Level Heading 

Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor 
egestas eu adipiscing enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis, 
lurna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque est in egestas. 











图 5-1 为 article 添加 青 景 色 和 边框 ， 以 看 清 这 个 居中 的 栏 


如 图 5-1 所 示 ， 通 过 给 整个 外 包装 设 定 宽度 值 ， 并 将 其 水 平 外 边 距 设 定 为 auto， 这 
个 单 栏 布 局 在 页 面 上 居中 了 。 随 着 向 里 添加 内 容 ， 这 一 栏 的 高 度 会 相应 增加 。 外 包 
装 中 的 article 元 素 本 质 上 就 是 一 个 没有 宽度 的 块 级 盒子 (关于 “没有 宽度 的 盒子 ”， 
请 参见 3.2 节 )， 它 水 平 扩 展 填 满 了 外 包装 。 下 面 ， 我 们 再 向 外 包装 里 添加 一 个 导航 
元 素 ， 让 它 作 为 第 二 栏 。 





«div id-"wrapper"» 
«nav» 
<l-- 无 序列 表 --> 
</nav> 
«article» 
<! -- 文本 --> 
«/article» 
«/div» 


我 们 得 浮动 作为 两 栏 的 容器 元 素 ， 让 它们 并 排 显示 ， 这 是 我 们 在 3.3 节 讲 过 的 。 
"wrapper (width:960px; margin:O auto; border:1px solid;) 


nav ( 
width:150px; 





float:left; 
} 
nav li ( 
/# 去 掉 列 表 项 目 符号 #/ 
list-style-type:none; 
} 
article { 
width:810px; 
float:left; 
background:itffed53; 











eno Creating Columns 

[31» 网 e |(a- 
Link 1 Two-Column Layout 
Link 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus felis gravida. Etiam ultricies tristique tellus, 
Link 3 vulputate euismod neque elementum ac. Integer at neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed 





bibendum metus faucibus sit amet. Sed convallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet 
facilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris rutrum quis. 





This is a Second-Level Heading 

Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. 
Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet 
elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus lacus 
lobortis. Morbi porttitor scelerisque est in egestas. 














5-2 ”在 布局 中 添加 了 第 二 栏 


如 图 5-2 所 示 ， 把 两 栏 容 器 元 素 的 总 宽度 设 定 为 外 包装 的 宽度 (150 + 810 = 960), 
并 浮动 它们 ， 就 可 以 创造 出 并 肩 排列 的 两 栏 来 。 每 一 栏 的 长 度 取决 于 内 容 多 少 。 采 
用 同样 的 方法 ， 可 以 添加 第 三 栏 (或 任意 多 个 栏 )。 


Ru 
Q 要 了 解 如 何 让 所 有 栏 看 起 来 都 同 布局 一 样 高 ， 请 参考 5.3.1 节 介绍 的 “人 造 栏 技术 ”。 





«div id-"wrapper"» 
«nav» 
《<1-- 无 序列 表 --> 
«/nav» 
«article» 
<! -- 文本 --> 
«/article» 
«aside» 
<! -- 文本 --> 
«/aside» 
«/div» 
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接 下 来 ,我 们 要 调整 article 这 一 栏 的 宽度 ， 为 第 三 栏 腾 出 空间 。 


#wrapper {width:960px; margin:O auto; border:1px solid;} 

nav { 
width:150px; 
float:left; 
background:itdcd9co; 

} 

nav li ( 
list-style-type:none; 

} 

article { 
width:600px; 
float:left; 
background:titffed53; 

} 

aside { 
width:210px; 
float:left; 
background:i3f7ccf; 


eoo Creating Columns 




















Three-Column Layout 
f Integer at neque in magna lacinia 
orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus felis aa a e nes 
gravida. Etiam ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at neque in magna lacinia Wege ullamcorper eros, sed 
bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Sed SXM EIE ELS 
convallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet Bliss esp AG 


dm 5 z à H onsectetur adipiscing elit. 
acilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris rutrum quis. 





ext for Third Link 














This is a Second-Level Heading 

hasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi 
dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras 
condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. 
Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus 
acus lobortis. Morbi porttitor scelerisque est in egestas. 




















图 5-3 布局 中 有 了 三 个 浮动 栏 


如 图 5-3 所 示 ， 通 过 把 三 个 浮动 容器 的 总 宽度 设 定 为 恰好 等 于 外 包装 的 宽度 ( 150 + 
600 + 210 = 960)， 就 有 了 三 栏 布局 的 框架 。 就 用 这 种 办 法 ， 我 可 以 想 加 多 少 栏 就 加 
多 少 栏 ， 只 要 它们 的 总 宽度 等 于 外 包装 的 宽度 即 可 。 当 然 ， 多 栏 布局 通常 都 有 与 布 
局 同 宽 的 页 由 和 页 脚 ， 下 面 我 们 就 来 添加 。 





«div id-"wrapper"» 
«header» 
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<1-- 标题 --> 
</header> 
«nav» 

《<1-- 无 序列 表 --> 
«/nav» 
«article» 

<! -- 文本 --> 
«/article» 
«aside» 

<! -- 文本 --> 
«/aside» 
«footer» 

<!-- 文本 --> 
«/footer» 

«/div» 


我 们 希望 页 眉 和 页 脚 与 布局 同 宽 ， 而 且 它 们 默认 就 与 布局 同 宽 ， 所 以 如 图 5-4 所 示 ， 
在 此 我 们 只 简单 地 为 它们 设 定 了 背景 色 ， 以 便 能 看 到 它们 在 哪儿 。 





header (background:itfoo;] 
footer (background:$000;] 


eoo Creating Columns 
[ aj») (+ 


A Fixed-Width Layout 


Three-Column Layout is is the Sidebar 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus felis Integer at neque in magna lacinia 
gravida. Etiam ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at neque in magna lacinia z 
ibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Sed § 
onvallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet Kikak su dolor st amet, 
E B 5 F onsectetur adipiscing elit. 
acilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris rutrum quis. 


his is the footer. Phasellus pretium 
gravida interdum. Nam interdum 


his is a Second-Level Heading posuere tempus. Ut commodo laoreet 
cre J ldolor, non hendrerit mi dictum vitae. 

Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi EPE TS 

dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras 

condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. 

Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus 

lacus lobortis. Morbi porttitor scelerisque est in egestas. 





















[Text for First Link 
Text for Second Link 
[Text for Third Link 







































图 5-4 ”页 眉 还 不 错 ， 但 页 脚 却 移动 到 了 浮动 栏 的 后 面 


此 时 的 页 眉 与 布局 同 宽 ， 其 内 容 高 度 也 比较 合适 。 但 是 ， 页 脚 位 于 浮动 元 素 后 面 ， 
所 以 就 会 尽量 往 上 移动 。 解 决 这 个 问题 也 很 简单 ， 代 码 如 下 ， 效 果 如 图 5-5 所 示 。 


footer (clear:both;) 
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eoo Creating Columns 











> ||+ 


















A Fixed-Width Layout 


[Text for First Link Three-Column Layout 


[Text for Second Link Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus felis 
Text for Third Link 


convallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet 
facilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris rutrum quis. 





This is a Second-Level Heading 

Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi 
dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras 
condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. 
Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus 
lacus lobortis. Morbi porttitor scelerisque est in egestas. 





图 5-5 ”应 用 清除 之 后 ， 页 脚 把 自己 定位 到 了 最 长 一 栏 的 下 方 
为 页 脚 应 用 clear:both ( clear:left 效果 也 一 样 ， 因 为 


以 阻止 它 向 上 移动 ， 不 让 它 超过 浮动 元 素 的 下 方 边界 。 
以 保证 页 脚 始终 都 位 于 最 长 栏 的 下 方 。 


bibendum sit amet sit amet dolor. 
gravia. Etiam ultricies tristique tellus, vulputate euismod neque elementum ac Integer at neque in magna lacinia 【TI 人 全 人 


bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Sed EA TIED 
Lorem ipsum. n sit amet, 
g elit. 


This is the footer. Phasellus pretlum gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. 


m 


这 里 


m 


3A 





只 有 左 浮动 元 素 )， 


一 条 简单 的 规则 ， 


到 目前 为 止 ， RITI HTML 标记 应 用 的 CSS 如 下 ( 没 多 少 文 本 样式 )。 


* {margin:0; padding:0;} 


#wrapper {width:960px; margin:O auto; border:1px solid;} 


header {background:#f00;} 

nav { 
width:150px; 
float:left; 
background:itdcd9co; 

} 

nav li ( 
list-style-type:none; 

} 

article { 
width:600px; 
float:left; 
background:ttffed53; 

} 

aside { 
width:210px; 
float:left; 
background:i3f7ccf; 

} 

footer {clear:both; background:#000;} 


就 可 
就 可 


5.2 ”三 栏 -固定 宽度 布局 


接 下 来 ,我 们 主要 解决 布局 中 的 两 个 主要 问题 。 首 先 ， 内 容 与 各 栏 边界 紧 挨 在 一 起 ， 
太 拥 挤 ; 其 次 ， 每 栏 高 度 由 文本 多 少 决定 ， 而 如 果 每 栏 都 与 布局 一 样 高 则 更 好 。 我 
们 移 来 为 内 容 周围 添加 一 些 空白 。 别 以 为 这 是 件 简单 的 事 儿 ， 一 会 儿 你 就 知道 了 。 


为 栏 设 定 内 边 距 和 边框 


只 要 一 调整 各 栏 中 的 内 容 ， 布 局 就 可 能 超过 容器 宽度 ， 而 右边 的 栏 就 可 能 滑 到 左边 
的 栏 下 方 。 一 般 来 说 ， 两 种 情况 下 可 能 会 发 生 这 种 问题 。 


口 为 了 让 内 容 与 栏 边界 空 开 距离 ， 为 栏 添加 水 平 外 边 距 和 内 边 距 ， 或 者 为 了 增加 栏 
间距 ， 为 栏 添加 外 边 距 〈 只 要 开始 给 布局 添加 样式 ， 就 一 定 会 采用 这 里 说 的 一 种 
做 法 ， 甚 至 双管齐下 )， 导 致 布局 宽度 增 大 ， 进 而 浮动 栏 下 滑 。 换 句 话 说， 右边 浮 
动 的 栏 因 为 没有 足够 的 空间 与 其 他 栏 并 列 ， 就 会 滑 到 左边 栏 的 下 方 。 

口 在 栏 中 添加 大 图 片 , 或 者 没有 空格 的 长 字符 串 ( 如 长 URL), 也 会 导致 栏 宽 超过 布 
局 宽度 。 同 样 ， 这 种 情况 下 右边 的 栏 也 会 滑 到 左边 的 栏 下 方 。 








好 了 ， 下 面 我 们 就 来 试 试 添加 内 边 距 ， 增 大 内 容 与 栏 边界 的 距离 。 这 次 从 中 间 一 栏 
开始 。 
article { 

width:600px; 

float:left; 

background:iffed53; 

padding:10px 20px; 
} 
如 图 5-6 所 示 ， 中 间 栏 的 文本 四 周 都 增加 了 间距 ， 与 栏 边界 保持 了 一 定 距离 。 可 是 ， 
这 样 一 来 由 于 中 间 栏 的 总 宽度 增加 ， 导 致 右边 的 栏 不 能 再 与 前 两 栏 并 排 在 一 起 ， 结 
果 就 跑 到 了 左边 栏 的 下 方 。 还 记得 吗 ,第 3 章 在 讲 盒 模型 的 时 候 我 们 说 过 ， 为 固定 
宽度 的 元 素 添 加 水 平 外 边 距 、 边 框 和 内 边 距 ， 会 导致 元 素 盒子 变 宽 。 像 这 样 增 大 浮 
动 栏 的 宽度 ， 几 乎 总 会 造成 图 5-6 所 示 的 “浮动 滑 移 ” 问 题 。 好 在 , 我 们 也 有 三 种 方 
法 来 预防 该 问题 发 生 。 
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eoo Setting Padding and Borders on Columns 

























[Text for First Link 
[Text for Second Link Three-Column Layout 


[Text for Third Link Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus felis. 
gravida, Etiam ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at neque in magna lacinia 
bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Sed 
convallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet 
facilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris rutrum quis. 








This is a Second-Level Heading 
Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi 
dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras 
condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. 
Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus 
lacus lobortis. Morbi porttitor scelerisque est in egestas. 








Lorem ipsum dolor sit amı 


图 5-6 中 间 栏 中 的 内 容 与 栏 边界 之 间 有 了 空间 ， 但 由 于 这 个 栏 占据 的 空间 增 大 ， 导 致 右边 的 栏 滑 
到 了 左边 的 栏 下 方 
a 从 设 定 的 元 素 宽度 中 减 去 添加 的 水 平 外 边 踢 、 边 框 和 内 边 距 的 宽度 和 。 
O 在 容器 内 部 的 元 素 上 添加 内 边 距 或 外 边 距 。 
口 使 用 CSS3 的 box-sizing 属性 切换 盒子 缩放 方式 ， 比 如 section (box-sizing: 
border-box;). 应 用 box-sizing 属性 后 ， 给 section 添加 边框 和 内 边 距 都 不 会 增 
大 盒子 ， 相 反 会 导致 内 容 变 罕 


我 们 分 别 试验 一 下 这 几 种 手段 。 





1. 重 设 宽度 以 抵消 内 边 距 和 边框 


比如 我 们 给 600 像素 宽 的 栏 又 添加 了 20 像素 的 内 边 距 ， 为 了 抵消 增加 的 内 边 距 ， 可 
以 把 栏 宽 减 少 40 像素 而 设 定 为 560 像素 。 这 样 ， 右 边 的 栏 就 能 归 位 。 问 题 在 于 ， 每 
次 只 要 调整 内 、 外 边 距 就 要 重 设 布 局 宽度 ， 有 点 烦人 。 因 此 这 个 办 法 虽然 可 行 ， 却 
不 够 理想 。 说 不 定 哪 一 回调 整 内 边 距 或 边框 就 会 导致 布局 错乱 。 








给 容器 内 部 的 元 素 应 用 内 边 距 和 边框 


把 外 边 距 和 内 边 距 应 用 到 内 容 元 素 上 确实 奏效 。 前 提 是 这 些 元 素 没有 明确 地 设 定 宽 
BE, 这样 它 们 的 内 容 才 会 随 着 内 、 外 边 距 的 增加 而 缩小 。 就 像 盒 模型 定义 所 说 的 ， 
没有 宽度 的 元 素 在 水 平方 向 上 会 适应 其 父 元 素 ， 其 内 容 会 随 着 外 边 距 、 边 框 和 内 边 
距 的 增加 而 减少 。 


5.2 ”三 栏 -固定 宽度 布局 


然而 ， 一 栏 之 中 可 能 会 包含 大 量 不 同 内 容 的 元 素 。 假 如 将 来 又 决定 调整 内 容 与 容 噩 
边界 的 距离 ， 就 必须 每 个 元 素 都 要 进行 调整 ,这样 不 仅 麻 烦 ， 而 且 容 易 出 错 。 况 且 ， 
给 栏 添加 边框 同样 会 增 大 栏 宽 ， 不 可 能 通过 为 其 包含 的 内 容 元 素 逐 个 应 用 样式 来 
做 到 。 


所 以 说 ， 与 其 为 容 需 中 的 元 素 添加 外 边 距 ， 不 如 在 栏 中 再 添加 一 个 没有 宽度 的 div, 
让 它 包 含 所 有 内 容 元 素 ， 然 后 再 给 这 个 div 应 用 边框 和 内 边 距 。 如 此 一 来 ， 只 要 为 
内 部 div 设 定 一 次 样式 ， 就 可 以 把 让 所 有 内 容 元 素 与 栏 边界 保持 一 致 的 距离 。 而 且 ， 
将 来 再 需要 调整 时 也 会 很 方便 。 任 何 新 增 内 容 元 素 的 宽度 都 由 这 个 内 部 div 决定 。 


采用 这 种 方法 除了 标记 中 多 了 一 个 div 元 素 外 ， 唯 一 的 问题 就 是 那些 反对 把 标记 用 
于 表现 用 途 的 纯粹 论 者 会 跟 你 叫嚣 。 关 于 我 对 这 个 问题 的 看 法 ， 请 参考 附注 栏 “ 关 
于 表现 性 标记 的 思考 ”， 另 外 一 个 附注 栏 “ 子 - 星 选择 符 ” 也 给 出 了 用 代码 替换 内 部 
div 的 方案 。 





关于 表现 性 标记 的 思 





HTML 的 目的 是 语义 ， 也 就 是 给 内 容 赋 予 含义 。 而 CSs 呢 ， 是 为 了 把 表现 性 的 样式 分 离 出 来 才 
发 明 的 。 不 过 ， 有 些 表现 性 标记 是 有 害 的 ， 而 有 些 则 没有 副作用 。 使 用 表格 来 创建 多 栏 布局 ， 
或 者 使 用 <br /> 标签 在 段 间 换行 ， 却 不 使 用 <p> 标 签 ， 这 种 做 法 的 确 不 值得 提倡 ， 因 为 这 会 造 
成 内 容 难 以 移植 。 比 如 说 吧 , 用 三 个 表格 单元 作为 三 栏 ， 这 种 布局 到 哪 都 会 显示 成 表格 ， 就 算 
是 在 完全 不 合适 的 智能 手机 里 也 一 样 。 如 果 表 现 性 标记 无 法 用 CSS 修改 , 或 者 在 CSS 不 可 用 时 
也 要 迫使 用 户 接受 ， 那 就 是 滥用 HTML。 可 是 ，div 或 span 这 种 中 性 的 元 素 ， 对 默认 样式 没 

影响 ， 除 非 你 给 它们 应 用 样式 ， 否 则 它们 就 跟 不 存在 一 样 。 所 以 ， 我 认为 添加 这 种 元 素 达 到 
表现 性 的 目的 是 完全 可 以 接受 的 。 


下 面 我 就 为 大 家 示范 怎么 用 内 部 div 修复 图 5-6 中 存在 的 问题 。 


«article» 
«div class-"inner"» 
《<1-- 文本 --> 
«/div» 
«/article» 


现在 ， 把 造成 问题 的 内 边 距 从 栏 上 去 掉 。 为 了 示范 这 个 技术 有 多 好 用 ， 接 下 来 我 们 
不 仅 要 给 内 部 div 应 用 内 边 距 ， 还 要 给 它 应 用 外 边 距 和 边框 。 
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article { 
width:600px; 
float:left; 
padding:10px 20px; 
background:ttffed53; 


article .inner ( 
margin:10px; 
border:2px solid red; 
padding:20px; 


eoo Setting Padding and Borders on Columns 











Three-Column Layout re 
Lorem ipsum dolorsit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a Vedere Tam 
cursus felis gravida. Etiam ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at orem ipsum dolor sit amet, 

neque in magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed onsectetur adipiscing elit. 

bibendum metus faucibus sit amet. Sed convallis accumsan dui, eu sodales odio mollis nec. Curabitur 

in nunc sed leo tempor luctus in a dolor. Sed sit amet facilisis sem. Donec scelerisque consectetur velit, 

vitae bibendum mauris rutrum quis. 


This is a Second-Level Heading 

Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non 
hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu 
adipiscing enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. 
Nam laoreet elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu adipi scing diam 
pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque 
est in egestas. 











This is the footer. Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. 





65-7 ”给 没有 宽度 的 内 部 div 应 用 外 边 距 、 边 框 和 内 边 距 后 ， 中 间 栏 的 宽度 没有 变化 ， 右 边 的 
栏 仍然 还 在 原来 的 位 置 上 





如 图 5-7 所 示 , 中 间 栏 的 宽度 并 未 因此 有 什么 变化 , 因为 内 容 区 减少 的 宽度 抵消 了 应 
用 到 内 部 div 上 的 外 边 距 、 边 框 和 内 边 距 的 总 宽度 。 总 之 ， 由 此 可 以 得 出 一 个 结论 : 
如 果 布 局 中 的 栏 是 浮动 的 ， 而 且 都 设 定 了 宽度 ， 你 就 根本 不 要 去 动 它 ! 要 动 ， 就 把 
内 容 放 在 内 部 div 里 ， 动 这 个 div。 


好 了 ， 解 决 问题 的 关键 已 经 讲 清楚 了 。 接 下 来 我 们 去 掉 中 间 栏 的 外 边 距 、 边 框 和 内 
边 距 ， 给 其 他 两 栏 也 添加 内 部 div， 然 后 只 给 这 三 栏 加 上 内 边 距 。 





«div id-"wrapper"» 
«header» 


5.2 三 栏 -固定 宽度 布局 


<!-- header text --» 
«/header» 
«nav» 
«div class-"inner"» 
«ul» 
<!-- 链接 --> 
«/ul» 
</div> 
</nav> 
<article> 
<div class="inner"> 
<!-- 文本 --> 
</div> 
</article> 
<aside> 
<div class="inner"> 
<!-- 文本 --> 
</div> 
</aside> 
<footer> 
《<1-- 文本 --> 
«/footer» 
«/div» 


接 下 来 我 们 就 利用 这 个 div 为 三 个 栏 中 的 内 容 创造 间距 。 此 外 ， 还 居中 了 页 脚 中 的 
内 容 。 


nav .inner (padding:10px;] 

article .inner (padding:10px 20px;] 

aside .inner (padding:10px;) 

footer (text-align:center] 

如 图 5-8 所 示 ， 三 栏 文本 与 栏 边界 之 间 有 了 内 边 距 生成 的 必要 距离 ， 而 footer 元 素 
中 的 文本 也 居中 了 。 


以 上 措施 使 图 5-5 所 示 的 布局 有 了 明显 改观 。 就 这 么 简单 的 几 下 , 布局 就 显得 更 专业 
了 。 处 理 栏 及 其 内 部 div 的 关键 在 于 ， 浮 动 栏 并 设 定 栏 宽 ， 但 不 给 任何 内 容 元 素 设 
定 宽 度 。 要 让 内 容 元 素 扩展 以 填充 它们 的 父 元 素 一 一 内 部 div。 这 样 ， 只 要 简单 地 设 
定 内 部 div 的 外 边 距 和 内 边 距 ， 就 可 以 让 它们 以 及 它们 包含 的 内 容 与 栏 边 界 保持 一 
定 距 离 。 
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eoo Setting Padding and Borders on Columns 
[1 jl € |fa- P 


Setting Padding and Borders 


Text for First Link Three-Column Layout This is the Sidebar 




























Text for Second Link Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus Integer at neque in magna lacinia 
Text for Third Link fel ida. Etiam ultrici il | od | | bibendum sit amet sit amet dolor. 
elis gravida. Etiam ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at neque in Nam consequat ullamcorper eros, 


magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus sed bibendum metus faucibus sit 
amet. Lorem ipsum dolor sit 


faucibus sit amet. Sed convallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor PEST etur adipiscing eit. 


luctus in a dolor. Sed sit amet facilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris 
rutrum quis. 





This is a Second-Level Heading 

Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non 
hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing 
enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit 
vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus 
vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque est in egestas. 








This is the footer. Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. 





图 5-8 ”通过 为 内 部 div 应 用 内 边 距 ， 布 局 的 宽度 并 没有 改变 
注意 ， 如 果 容 器 的 上 、 下 边框 不 可 见 ， 内 部 div 的 上 、 下 外 边 距 会 营 加 。 要 是 你 遇 


到 了 这 个 问题 ， 可 以 只 为 容器 设 定 垂 直 内 边 距 。 但 要 小 心 一 点 ， 别 一 块 儿 也 添加 水 
FAE, FEAN article (padding:20px 0;}， 就 只 设 定 了 上 、 下 内 边 踊 。 











子 - 星 选择 符 


所 谓 “ 子 - 星 选择 符 ” 就 是 一 个 组 合 选择 符 ， 利 用 它 可 以 不 使 用 内 部 div 就 能 设 定 一 栏 中 所 有 
元 素 的 外 边 距 。 


星 号 选择 符 可 以 选择 “所 有 元 素 ”, 故而 ,在 一 个 选择 符 后 面 加 个 星 号 ,比如 someSelector * 
就 可 以 选择 someSelector 所 代表 元 素 的 所 有 后 代 元 素 。 子 选择 符 可 以 选择 “ 某 元 素 的 子 元 
素 "， 故 而 ， 把 子 选择 符 放 到 星 号 前 面 ， 比 如 someSelector > * 就 会 只 选择 someSelector 
所 代表 元 素 的 所 有 子 元 素 ， 而 非 后 代 元 素 。 这 正好 适用 于 选择 容器 内 部 的 所 有 顶部 元 素 , 然后 
设 定 它们 的 外 边 距 。 比 如 ， 对 于 section 栏 , 设 定 section > * {margin:0 10px;], 就 
能 为 栏 中 所 有 子 元 素 ， 不 包括 其 他 后 代 元 素 ， 各 应 用 10 像素 的 左 、 右 外 边 距 。 使 用 “ 子 - 星 
选择 符 ” 要 注意 两 点 。 第 一 ， 在 为 子 元 素 设 定 垂 直 外 边 距 时 ， 只 能 使 用 margin-top 和 
margin-bottom， 不 能 使 用 简写 的 margin， 否 则 会 抵消 用 “ 子 - 星 选择 符 ” 应 用 给 这 些 元 素 
的 水 平 外 边 距 。 如 果 你 想 进 一 步 缩 进 某 个 子 元 素 的 内 容 ， 就 应 该 给 该 子 元 素 应 用 内 边 距 。 


第 二 ,，“ 子 - 星 选择 符 ” 有 潜在 性 能 问题 ， 因 为 它 会 导致 浏览 器 遍历 整个 DOM 结构 去 查找 所 有 
匹配 的 元 素 。 但 我 也 发 现 这 一 点 性 能 影响 几乎 可 以 忽略 不 计 。 假 如 你 的 页 面 真 的 包含 几 和 干 上 万 
个 元 素 ， 那 倒 确 实 该 考虑 用 yslow 或 其 他 性 能 度量 工具 测 一 测 这 个 选择 符 的 影响 。 
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3. 使 用 box-sizing:border-box 


这 是 最 简单 的 一 个 办 法 。 只 要 在 三 个 浮动 的 栏 的 CSS 规则 中 分 别 加 上 
box-sizing:border-box 声明 ， 青 给 栏 添加 内 边 距 ( 和 边框 ) 就 不 会 导致 盒子 的 宽度 
变化 了 。 此 时 ， 既 不 用 调整 栏 宽 去 抵消 增加 的 内 边 距 ， 也 不 用 使 用 内 部 div。 添 加 内 
边 距 的 结果 就 是 内 容 收 缩 。 以 下 就 是 简洁 清晰 的 没有 内 部 div 的 标记 。 











«div id-"wrapper"» 
«header» 
<!-- 标题 --> 
«/header» 
«nav» 
«ul» 
<!-- 链接 --> 
«/ul» 
«/nav» 
«article» 

《<1-- 文本 --> 
«/article» 
«aside» 

<!-- 文本 --> 
«/aside» 

«footer» 

<!-- 文本 --> 

«/footer» 
«/div» 


而 以 下 就 是 CSS 规则 。 


* (margin:0; padding:0;j 
#wrapper (width:960px; margin:O auto; border:1px solid #000; 
overflow:hidden;) 


header (background:itfoo;] 

nav { 
box-sizing:border-box; 
width:150px; 
float:left; 
background:itdcd9c0; 
padding:10px 10px; 
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/* 去 掉 列 表 项 目 符号 */ 

nav li {list-style-type:none;} 

article { 
box-sizing:border-box; 
width:600px; 
float:left; 
background:ttffed53; 
padding:10px 20px; 

} 

aside { 
box-sizing:border-box; 
width:210px; 
float:left; 
background:t3f7ccf; 
padding:10px 10px; 

} 

footer {clear:both; background:#000;} 


eoo Setting Padding and Borders on Columns 
ERR ES e |fa- 


Setting Padding and Borders 


Text for First Link Three-Column Layout This is the Sidebar 


Text for Second Link 




































"e Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eleifend libero et risus aliquam a cursus Integer at neque in magna lacinia 
Text for Third Link fel m Etiam ultricies tristi | : d q d il - bibendum sit amet sit amet dolor. 
elis gravida. Etiam ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at neque in Nam consequat ullamcorper eros, 
magna lacinia bibendum sit amet sit amet dolor. Nam consequat ullamcorper eros, sed bibendum metus sed bibendum metus faucibus sit 


amet. Lorem ipsum dolor sit 


faucibus sit amet. Sed convallis accumsan dui, eu sodales odio mollis nec. Curabitur in nunc sed leo tempor amet; consectetur adipisting alt. 


luctus in a dolor. Sed sit amet facilisis sem. Donec scelerisque consectetur velit, vitae bibendum mauris 
rutrum quis. 





This is a Second-Level Heading 

Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non 
hendrerit mi dictum vitae. Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing 
enim pellentesque. Cras condimentum tellus in nisl tincidunt et ornare augue dignissim. Nam laoreet elit 
vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu adipi scing diam pharetra ac. Vivamus 
vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque est in egestas. 





This is the footer. Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. Nam nec egestas libero. 
— , € . 
图 5-9 使 用 box-sizing 属性 后 ， 可 以 直接 给 栏 应 用 内 边 


如 图 5-9 所 示 , 直接 给 栏 应 用 内 边 距 会 导致 内 容 变 罕 , 但 不 会 影响 布局 。 听 起 来 容易 
的 办 法 总 会 有 一 个 “但 是 ”， 这 里 的 “但 是 ”要 说 的 是 IE6 和 IE7 不 文 持 box-sizing 
属性 。 不 过 ,有 一 个 专门 解决 这 个 问题 的 腻子 脚本 ( polyfill ), 名 叫 borderBoxModel.js。 
你 可 以 使 用 条 件 注释 (以 便 只 有 IE6 和 IE7 加 载 ) 把 它 添 加 到 HTML 标记 之 后 、 结 
束 的 </body> 标 签 之 前 ， 以 保证 在 加 载 DOM 之 后 再 执行 该 脚本 : 


» 本 书 附录 介绍 了 什么 是 腻子 脚本 ， 以 及 为 什么 需要 它们 。 
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«body» 

<!-- HTML 标记 --> 

<!-- 只 让 IE8 之 前 的 IE 加载 它 --> 

<!--[if lt IE 8 ]» 

«script src-"helpers/borderBoxModel.js"»«/script» 

«I[endif]--» 

«/body» 

最 新 版 本 的 borderBoxModel.js 腻子 脚本 以 及 它 的 用 途 和 局 限 性 ， 可 以 参考 这 里 : 
https://github.com/albertogasparin/borderBoxModel。 另 外 ， 也 可 以 读 一 读本 人 的 这 篇 
谈 box-sizing 的 文章 : http://albertogasparin.it/articles/2012/02/start-using-css-box-sizing- 
today, 


这 样 , IE6 和 IE7 就 可 以 根据 box-sizing 属性 的 设 定 正确 地 调整 栏 的 大 小 了 。 在 依靠 
内 部 div 几 年 之 后 ， 经 过 试验 我 发 现 ， 不 仅 给 浮动 的 栏 ， 甚 至 给 所 有 元 素 都 应 用 这 
个 不 同 的 盒 缩 放 模型 都 是 没有 问题 的 ， 我 在 CSS 里 会 添加 这 一 条 规则 : 

* (box-sizing:border-box] 

如 此 一 来 ， 页 面 中 的 盒 模型 就 全 都 符合 逻辑 了 。 换 句 话 说， 每 个 盒子 的 宽度 并 不 是 
内 容 区 的 宽度 ， 而 是 一 经 设 定 就 不 可 变 的 真正 的 盒子 宽度 。 在 此 期 间 ， 我 经 带 关 注 
一 些 Web 大 牛 ， 比 如 Paul Irish。 建 议 大 家 读 一 读 他 的 相关 文章 http://paulirish. 
com/2012/box-sizing-border-box-ftw。 男 外 ， 别 忘 了 看 看 文章 底下 的 评论 ， 因 为 有 人 
提出 了 一 些 疑问 ， 也 不 是 所 有 人 都 同意 他 的 观点 。 


好 了 ， 下 一 节 我 们 就 讲 一 讲 实现 流动 布局 的 几 种 方式 。 





预防 过 大 的 元 素 





设计 一 个 将 来 可 能 由 他 人 维护 的 动态 网 站 时 ， 需 要 考虑 得 更 长 远 一 些 。 比 如 , 应 该 预见 到 可 能 
出 现 一 些 过 大 的 元 素 。 如 果 将 来 有 一 张 比 浮动 栏 更 宽 的 图 片 被 放 到 栏 中 ， 就 会 导致 布局 变 宽 ， 
而 右边 的 栏 又 会 滑 到 下 方 。 为 此 ， 一 个 简单 的 预防 措施 就 是 添加 一 条 .inner img 
{max-width:100%;} 声 明 ， 以 便 限 制图 片 的 宽度 不 超过 其 父 元 素 ( 在 此 就 是 内 部 div) o 


另 一 个 办 法 是 给 每 个 栏 (或 者 内 部 div， 如 果 你 用 了 的 话 ) 添加 overflow:hidden 声明 。 这 条 
声明 不 会 缩小 图 片 以 适应 父 元 素 , 而 会 将 它 ( 以 及 任何 过 大 元 素 ) 超 出 容器 边界 的 部 分 剪 切 掉 。 
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动态 网 站 中 另 一 个 潜在 的 问题 是 换行 。HTML 只 会 在 单词 间 空 格 的 地 方 换行 。 一 些 长 URL, E 
至 一 些 长 单词 ,在 栏 比 较 窜 的 情况 下 ， 都 会 导致 栏 宽 过 大 。 因 此 ， 还 应 该 给 所 有 栏 的 外 包装 元 
素 应 用 word-wrap:break-word 声明 ， 以 便 所 有 栏 及 其 内 容 继承 这 个 设 定 。 有 了 这 条 声明 ， 浏 
览 器 会 把 过 长 的 词 断 开 显示 在 不 同行 上 。 只 是 word-wrap 没有 定义 在 哪里 断 开 , 因此 结果 完全 
是 随机 的 ， 而 且 没 有 连 字 符 。 不 过 ， 这 条 规则 只 在 需要 时 才 会 起 作用 ， 而 且 能 保护 布局 不 会 被 
长 URL 顶 得 支离破碎 。 建 议 你 在 每 一 栏 中 都 用 长 URL、 大 图 片 ， 以 及 包含 内 容 过 多 的 元 素 测试 
一 下 布局 ， 看 看 这 些 声 明 到 底 会 不 会 起 作用 ， 并 发 现 更 多 需要 事先 考虑 保护 措施 的 其 他 
漏洞 。 


5.3 ”三 栏 -中 栏 流动 布局 
实现 中 栏 流动 布局 有 两 种 方法 。 一 种 是 在 中 栏 改变 大 小 时 使 用 负 外 边 距 定位 有 栏 ， 


另 一 种 是 使 用 CSS3 让 栏 容器 具有 类 似 表 格 单元 的 行为 ,。 负 外 边 距 适 合 比 较 老 的 浏览 
器 ， 而 CSS 的 table 属性 则 要 简单 得 多 。 本 节 介 绍 这 两 种 方法 。 








5.3.1 用 负 外 边 距 实现 


实现 三 栏 布局 且 让 中 栏 内 容 区 流动 (不 固定 ) 的 核心 问题 ， 就 是 处 理 右 栏 的 定位 ， 
并 在 中 栏 内 容 区 大 小 改变 时 控制 右 栏 与 布局 的 关系 。 


Web 开发 人 员 Ryan Brill 给 出 的 解决 方案 是 控制 两 个 外 包装 (通过 ID EX wrapper ) 
容 需 的 外 边 距 。 其 中 一 个 外 包装 包围 所 有 三 栏 ， 另 一 个 外 包装 只 包 轩 左 栏 和 中 栏 。 
由 于 相应 的 标记 和 CSS 与 我 们 前 面 刚 讲 过 的 固定 栏 宽 布局 相似 ， 所 以 有 些 细节 就 没 
有 必要 再 重复 了 。 不 过 ， 以 下 代码 加 粗 了 相应 的 外 包装 元 素 及 CSS 规则 ， 并 配 上 了 
简明 的 注释 ， 最 后 还 给 出 了 两 个 屏幕 截图 ( 图 5-10a 和 图 5-10b )。 
































«div id-"main wrapper"» 
«header» 
<!-- AR À-- 
«/header» 
«div id="threecolwrap">/* 三 栏 外 包装 
«div id="twocolwrap">/* 两 栏 外 包 
/* 左 栏 */ 
<nav> 


<l-- 导航 -> 


(包围 全 部 三 栏 ) */ 
AX (包围 左 栏 和 中 栏 ) */ 
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«/nav» 
/* 中 栏 */ 
«article» 
<!-- 区 块 --> 
«/article» 
</div>/# 结 束 两 栏 外 包装 (twocolwrap) */ 
/* 右 栏 */ 
«aside» 
«1-- 侧 栏 --> 
«/aside» 
</div>/* 结 束 三 栏 外 包装 (threecolwrap) * 
«footer» 
<!-- 页 脚 --> 
«/footer» 


«/div» 


以 下 就 是 CSS 规则 。 


下 载 的 代码 中 包含 一 些 与 修复 IE6 和 JIE7 的 bug 有 关 的 代码 ， 


* (margin:0; padding:0;j 
body {font:1em helvetica, arial, sans-serif;] 
divitmain wrappert{ 


min-width:600px; max-width:1100px; 
/* 超 过 最 大 宽度 时 ， 居 中 布局 */ 
margin:O auto; 

/* 背 景 图 片 默认 从 左上 角 开 始 拼 接 */ 


这 些 代码 都 有 注释 。 


background:url(images/bg tile 150pxw.png) repeat-y #eee; 


} 
header { 
padding:5px 10px; 
background:i3f7ccf; 
} 


div#threecolwrap { 


} 


/* 浮 动 强 制 它 包 围 浮动 的 栏 */ 
float:left; 

width: 10076; 

/* 背 景 图 片 右 对 齐 */ 


background:url(images/bg tile 210pxw.png) top right repeat-y; 


divittwocolwrap M 


/* 浮 动 强制 它 包围 浮动 的 栏 */ 


- 173 - 


- 174 - 


第 5 章 页面 布 局 


float:left; 

width: 10026; 

/* 把 右 栏 拉 到 区 块 外 边 距 腾 出 的 位 置 上 */ 
margin-right:-210px; 


} 

nav { 
float:left; 
width:150px; 
background:#f00; 
padding:20px 0; 

} 


/* 让 子 元 素 与 栏 边界 保持 一 定 距离 */ 
nav > * (margin:O 10px;} 
article { 
width:auto; 
margin-left:150px; 
/* 在 流动 居中 的 栏 右 侧 腾 出 空间 */ 
margin-right:210px; 
background:#eee; 
padding:20px 0; 
} 
* 让 子 元 素 与 栏 边界 保持 一 定 距离 */ 
article > * {margin:0 20px;} 
aside { 
float:left; 
width:210px; 
background:itffed53; 
padding:20px 0; 
} 
* 让 子 元 素 与 栏 边界 保持 一 定 距离 */ 
aside > * (margin:O 10px;} 
footer { 
clear:both; 
width: 10026; 
text-align:center; 
background:#000; 
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eoo A Three-Column Fluid Center Layout with Negative Margins 
| [ "RES | + _ e | (a- J 


A Three-Column Fluid Center Layout 


Nav Link 1 About This Layout Sidebar Area 

aes This page is styled with CSS. This layout uses negative margins to create this feature-rich layout. This column hos a negative margin 
Key Features applied to it to draw it inside of the full. 
Resize this page to see the following: width content div. A positive morgin on 

1. The center content column changes width as you change the browser width. the content div ensures there will be 

2. The min-width setting prevents the content being crushed down to nothing; once the 
content reaches minimum width, the layout gets no narrower. 

3. The max-width setting prevents the content getting too wide; once it reaches maximum 
width, the layout gets no wider and the auto margins center the layout in the browser 
window. 

4. The footer sits below whichever column is longest. 























room for il. 





A 


图 5-10q ”屏幕 变 宽 时 ， 中 栏 变 宽 ， 左 栏 和 右 栏 宽度 不 变 


hird Edition by Charles Wyke-Smith. 


moo A Three-Column Fluid Center Layout with Negative Margins 


A Three-Column Fluid Center Layout 


Nav Link 1 About This Layout Sidebar Area 
EDDIE AC This page is styled with CSS. This layout uses negative This column has a negative margin 
margins to create this feature-rich layout. applied to it to draw it inside of the full 
Key Features width content div. A positive margin on 
Resize this page to see the following: the content div ensures there will be 
1. The center content column changes width as you room forit 
Change the browser width. 
. Themin-width setting prevents the content 
being crushed down to nothing; once the content 
reaches minimum width, the layout gets no 
narrower. 
. Themax-width setting prevents the content 
getting too wide; once it reaches maximum width, 
the layout gets no wider and the auto margins 
center the layout in the browser window. 
. The footer sits below whichever column is 
longest. 





A CSS template from Styli Third Edition by Charles Wyke-Smith 





图 5-10b ”屏幕 变 罕 时 ， 中 栏 变 罕 ， 左 栏 和 右 栏 宽度 不 变 


图 5-10a 和 图 5-10b 展示 了 流动 中 栏 布局 ,下 面 简单 说 明 其 原理 ,三 栏 中 的 右 栏 是 210 
像素 宽 , 为 了 给 右 栏 腾 出 空间 , 中 栏 article 元 素 有 一 个 210 像 素 的 右 外 边 距 。 当然 ， 
光 有 这 个 外 边 距 只 能 把 右 栏 再 向 右 推 210 像素 。 别 急 ， 包 围 左 栏 和 中 栏 的 两 栏 外 包 
装 上 210 像素 的 负 右 外 边 距 , 会 把 右 栏 拉 回 article 元 素 右 外 边 距 ( 在 两 栏 外 包装 内 
部 右 侧 ) 创造 的 空间 内 。 中 栏 aticle 元 素 的 宽度 是 auto ( 原文 100% 有 错误 。 一 一 
译 者 注 )， 因 此 它 仍然 会 力求 占据 浮动 左 栏 剩余 的 所 有 空间 。 可 是 ， 一 方面 它 自己 的 
右 外 边 距 在 两 栏 外 包装 内 为 右 栏 腾 出 了 空间 ， 男 一 方面 两 栏 外 包装 的 负 右 外 边 距 又 
把 右 栏 拉 到 了 该 空间 内 。 总 之 ， 这 是 个 很 巧妙 的 设计 。 
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人 造 栏 技术 


有 人 可 能 会 纳闷 ， 这 些 栏 怎么 都 跟 布 局 一 样 高 呢 ? 实话 跟 你 说 吧 ， 你 看 到 的 都 是 假 
象 ! 这 里 我 采用 了 一 种 叫 “ 人 造 栏 ”的 技术 ， 这 样 才 让 所 有 栏 看 起 来 都 一 样 高 了 。 
这 个 技术 说 来 也 简单 ， 就 是 给 包围 栏 的 外 包装 元 素 应 用 与 各 栏 同 宽 的 背景 图 片 和 背 
景色 。 外 包装 元 素 跟 它们 包含 的 栏 不 一 样 ， 它 们 的 高 度 就 是 布局 高 度 ， 当 然 与 内 容 
区 的 高 度 相 同 。 通 过 在 它们 的 背景 的 垂直 方向 上 重复 拼接 背景 图 片 ， 就 可 以 在 视觉 
上 造成 各 栏 与 布局 同 高 的 假象 。 这 个 例子 分 别 为 左 栏 和 右 栏 应 用 了 不 同 的 背景 图 片 
( 如 图 5-11 所 示 )， 为 流动 的 中 栏 应 用 了 背景 色 。 


图 5-11 为 流动 中 栏 布局 的 左 栏 和 右 栏 准备 的 两 张 背 景 图 片 


如 前 面 CSS 加 粗 的 代码 所 示 ， 左 栏 的 背景 图 片 加 在 了 divimain wrapper Eo ARY 
背景 图 片 加 在 了 div#threecolwrap 上 ， 而 且 让 它 沿 该 div 的 右 侧 垂直 拼接 。 中 栏 的 
背景 色 也 加 在 了 div#main_wrapper 上 ， 这 个 背景 色 实 际 上 是 整个 布局 的 背景 色 。 而 
位 于 两 侧 的 两 栏 的 背景 图 片 ， 以 及 页 眉 和 页 脚 的 背景 色 ， 都 会 覆盖 这 个 背景 色 (TF 
元 素 覆 盖 父 元 素 )。 因 此 ， 只 能 在 中 栏 看 到 该 全 局 背景 色 。 























访问 本 书 网 站 http://www.stylinwithcss.com， 可 以 免费 阅读 使 用 jQuery 和 渐变 图 生成 
人 造 栏 的 一 章 。 





在 这 个 页 面 布局 的 例子 中 , 还 有 一 个 知识 点 值得 注意 。 那 就 是 我 使 用 " 子 - 星 选择 符 ” 
为 内 容 元 素 添 加 了 水 平 外 边 距 (如 nav > * {margin:0 10px;})， 而 没有 采用 给 内 部 
div 添加 内 边 趾 的 方法 。 这 样 就 让 你 在 实际 案例 中 看 到 该 选择 符 的 应 用 。 要 了 人 解 
“ 子 - 星 选择 符 ” 的 细节 ， 请 参考 5.2 市 中 “为 栏 设 定 内 边 距 和 边框 ”小 节 。 


5.3.2 用 CSS3 单元 格 实现 
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尽管 利用 HTML 的 <table> 标 签 实现 多 栏 布局 是 难以 接受 的 ， 但 使 用 CSS 让 布局 形 
如 表格 则 是 绝对 可 以 接受 的 。 这 种 方法 不 会 导致 固定 不 变 的 表格 布局 ， 也 不 会 出 现 
难以 重新 应 用 样式 的 问题 ( 比如 在 手持 设备 上 表现 为 一 栏 )。 说 到 创建 布局 ， 表 格 的 
行为 确实 是 非常 符合 要 求 的 ， 下 面 我 来 解释 一 下 。 


在 最 简单 的 情况 下 ， 表 格 由 三 个 元 素 构 成 。 一 个 表格 外 包装 <table>， 包 含 着 表格 行 








5.3_ 三 栏 -中 栏 流动 布局 


<tr> 和 表格 数据 ctd>， 比 如 下 面 这 个 例子 。 


«table» 
«tr» «td»Cell 1«/td»«td»Cell 2«/td»«td»Cell 3«/td» </tr> 
«tr» «td»Cell 1«/td»«td»Cell 2«/td»«td»Cell 3«/td» </tr> 
«/table» 


我 们 知道 ，CSS 可 以 把 一 个 HTML 元 素 的 display 属性 设 定 为 table, table-row 和 
table-cell。 通 过 这 种 方法 可 以 模拟 相应 HTML 元 素 的 行为 。 而 通过 CSS 把 布局 中 
的 栏 设 定 为 table-cell 有 三 个 好 处 。 


O 单元 格 (table-cell ) 不 需要 浮动 就 可 以 并 排 显 示 , 而 且 直 接 为 它们 应 用 内 边 距 也 不 
会 破坏 布局 。 

a 默认 情况 下 , 一行 中 的 所 有 单元 格 高 度 相 同 ， 因 而 也 不 需要 人 造 的 等 高 栏 效 果 了 。 
a 任何 没有 明确 设 定 宽度 的 栏 都 是 流动 的 。 











这 三 个 好 处 解决 了 本 章 前 面 学 习 布局 时 遇 到 的 问题 。 然 而 ，( 这 里 一 定 有 蹊跷 ， 对 
IE? ) CSS3 表格 行为 在 正 7 及 更 低 版 本 中 并 没有 得 到 文 持 ， 而 且 也 没有 稳妥 的 补救 
措施 。 如 果 你 (或 者 你 的 客户 ) 愿意 所 弃 IET, 那么 它 就 是 一 个 既 简单 又 可 靠 ， 而 且 
还 很 彻底 的 解决 方案 。 如 果真 是 这 样 ， 我 绝对 推荐 你 采用 这 个 方案 ， 前 面 所 讲 的 各 
种 方案 就 当 我 没 说 。 

关键 是 ， 你 甚至 都 不 需要 用 div 外 包装 来 扮演 table 和 tr 元 素 ， 仅 仅 是 把 三 栏 的 
display 属性 设 定 为 table-cell 就 可 以 了 。 浏 览 器 的 排版 引擎 在 碰 到 没有 表 行 (tr ) 
的 一 组 单元 格 时 ， 会 自动 为 它们 添加 表 行 ， 而 在 表 行 没有 被 table 元 素 包 围 时 ， 会 
自动 为 表 行 添加 table。 因 此 ， 你 不 需要 多 写 任何 标记 ， 只 要 把 每 一 栏 的 display 属 
性 设 定 为 table-cel1， 剩 下 的 事 儿 就 可 全 部 交 给 浏览 器 负责 了 。 


























因此 ， 要 实现 一 个 三 栏 -流动 中 栏 布局 ， 只 需要 以 下 标记 : 


<nav><!-- Pj X --»«/nav» 
«xarticle»«!-- 内 容 --»«/article» 
«aside»«!-- 内 容 --»«/aside» 


和 以 下 CSS: 


nav {display:table-cell; width:150px; padding:10px; 
background:itdcd9co; ) 
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article {display:table-cell; padding:10px 20px; 

background:#ffed53;} 
aside {display:table-cell; width:210px; padding:10px; 

background:#3f7ccf;} 
在 图 5-5 所 示 固 定 宽度 布局 的 HTML 基础 上 ， 我 们 去 掉 了 内 部 div。 而 在 CSS 中 ， 
把 每 一 栏 的 float:left 替换 成 了 display:table-cell, 同时 去 掉 了 中 栏 的 宽度 设 定 。 
好 了 ， 一 个 中 栏 流 动 、 各 栏 同 高 ， 而 且 能 够 方便 为 内 容 添 加 内 边 距 和 边框 的 布局 就 
这 么 出 炉 了 《参见 图 5-12)! 


eoo A Three-Column, Fluid Center Layout with CSS3 Table Properties 























€ |fa- 











Text for First Link Three-Column Layout This is the Sidebar 
i Lorem ipsum dolor sit amet, consectetur adipiscing elit. Miquam eleifend libero et risus aliquam a cursus felis gravida. Etiam Integer at neque in magna lacinia 
Text for Third Lini 


ultricies tristique tellus, vulputate euismod neque elementum ac. Integer at neque in magna lacinia bibendum sit amet sit amet 
dolor. Nam consequat ullamcorper eros, sed bibendum metus faucibus sit amet. Sed convallis accumsan dui, eu sodales odio 
mollis nec. Curabitur in nunc sed leo tempor luctus in a dolor. Sed sit amet facilisis sem. Donec scelerisque consectetur velit, Lorem ipsum dolor sit amet, 

A D consectetur adipiscing elit. 
vitae bibendum mauris rutrum quis. 





This is a Second-Level Heading 

Phasellus pretium gravida interdum. Nam interdum posuere tempus. Ut commodo laoreet dolor, non hendrerit mi dictum vitae. 
Nam nec egestas libero. Quisque sodales tortor ut tortor egestas eu adipiscing enim pellentesque. Cras condimentum tellus in 
nisl tincidunt et ornare augue dignissim. Nam laoreet elit vitae lorem tincidunt adipiscing. Maecenas pharetra mattis urna, eu 
adipi scing diam pharetra ac. Vivamus vulputate odio at velit sagittis a rhoncus lacus lobortis. Morbi porttitor scelerisque est in 
egestas. 








图 5-12 ”这 个 流动 布局 使 用 了 CSS3 的 display:table-cell， 让 每 个 栏 形 同 单元 格 一 般 


请 注意 , 这 个 简单 、 功 能 完备 的 布局 对 IE7 和 正 6 可 没有 任何 腻子 脚本 ,甚至 连 个 退 
化 的 后 备 方案 都 没有 。 在 这 些 浏 览 器 中 ， 三 栏 会 上 下 堆 释 在 一 起 。 因 此 ， 除 非 你 下 
定 决 心 不 再 支持 老 版 本 的 万， 否则 就 得 使 用 本 章 前 面 讲 过 的 其 他 布局 技术 。 等 吧 ， 

等 到 这 些 浏览 器 没 人 用 为 止 。 


最 后 我 们 总 结 一 下 本 节 讨 论 的 布局 技术 。 这 一 节 先 讲 了 使 用 内 部 div 的 浮动 固定 宽 
度 布 局 技术 ， 它 是 适合 新 旧 浏 览 器 的 一 种 最 安全 的 技术 。 当 然 ， 这 种 技术 要 求 的 工 
作 量 也 最 多 。 而 使 用 boxsizing:border-box 声明 ( 再 加 上 适用 于 IET 和 正 6 的 腻子 脚 
本 ) 则 能 提供 更 直观 的 盒 模型 ， 而 且 不 用 使 用 内 部 div。 最 后 ，CSS3 的 
display:table-cell 方案 容易 实现 义 功能 完善 ( 想 流动 就 流动 , 想 固定 就 固定 , 各 栏 
同 高 ， 而 且 不 需要 内 部 div) Am, EREA IE7 以 上 版 本 的 浏览 器 。 


到 目前 为 止 ， 我 们 例子 中 的 布局 都 是 在 页 眉 和 页 脚 之 间 简 单 地 放 着 三 个 栏 。 本 章 最 
后 ,我 们 在 前 面 三 栏 布局 的 基础 上 ， 青 介绍 一 个 稍微 复杂 一 些 的 例子 。 





5.4_ 多 行 多 栏 布局 


5.4 多 行 多 栏 布 局 


本 章 最 后 ， 为 了 给 第 7 章 设 计 完 整 的 网 页 做 好 准备 ， 我 们 要 把 前 面 学 习 的 三 栏 布 局 
的 技术 付 诸 实用 。 我 准备 向 大 家 展示 一 个 更 复杂 ， 也 更 接近 实际 的 页 面 框架 。 这 个 
页 面 的 布局 可 以 用 作 WordPress 模板 或 一 个 公司 网 站 的 基础 。 











前 面 的 布局 中 只 包含 一 个 article、 一 个 nav……， 因 此 比较 容易 选择 ， 只 要 用 标签 
名 即 可 。 而 在 创建 复杂 布局 时 ， 一 个 页 面 中 会 出 现 多 个 相同 的 标签 ， 选 择 的 时 候 就 
要 用 上 下 文选 择 符 来 区 分 它们 了 。 我 想 通过 下 面 的 例子 ， 告 诉 你 怎么 给 标记 中 添加 
最 少 的 ID 和 类 ， 同 时 精确 地 选择 任意 元 素 。 


本 章 前 面 说 过 ， 使 用 CSS3 的 box-sizing:border-box 声明 ， 可 以 避免 利用 内 部 div 
为 内 容 添加 边 距 。 可 是 ， 这 些 内 部 元 素 ， 无 论 是 div 还 是 别 的 什么 元 素 ， 也 能 辅助 
添加 各 种 样式 ， 这 个 例子 会 展示 它们 在 这 方面 的 用 途 。 


这 个 布局 (如 图 5-13 所 示 ) 由 六 个 等 宽 的 行 组 成 , 其 中 第 四 行 有 三 栏 , 第 五 行 有 四 栏 。 


eoo A Multi-Row, Multi-Column Layout 








e |(a- 








row 4 = 


ibi olor. el et dolor. 
row 3 =| in ero N er ero: 


sed bibendum metus faucibus sit sed bibendum metus faucibus sit 


amel amet 








图 5-13 ”包含 六 个 等 宽 行 和 两 组 不 同 分 栏 的 布局 
这 个 布局 的 标记 如 下 。 


«div id-"wrapper"» 
«header» 
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<h1>Full-width content</h1> 
«/header» 
«nav» 
«p»Navigation menus go here«/p» 
«/nav» 
«section id-"branding"» 
«img src-"images/grand canyon.jpg" alt-"Grand Canyon" /» 


«/section»«!-- branding 结束 --» 
«section id-"feature area"» 
«article» 


«div class-"inner"» 
«p»Lorem Ipsum text«/p» 


«/div» 

«/article» 

«1-- 省 略 另 外 两 个 article X --» 
«/section»«!-- feature area 结束 --> 
«section id-"promo area"» 

«article» 


«div class-"inner"» 
«p»Lorem Ipsum text«/p» 


«/div» 
«/article» 
«1-- 省 略 另 外 三 个 article X --> 
«/section»«!-- promo area 结束 --> 
«footer» 


<p>A CSS template from «a href-"http://www.stylinwithcss.com"»«em» 
Stylin' with CSS, Third Edition«/em»«/a» by Charles Wyke-Smith«/p» 
«/footer» 
«/div» 


至 于 怎么 把 以 上 标记 变 成 图 5-13 所 示 的 布局 ， 实 际 上 我 们 都 已 经 讲 过 了 。 比 如 ， 等 
宽 的 各 行 ， 不 用 设 定 它 们 的 宽度 ， 让 它们 自动 扩展 填充 外 包装 元 素 即 可 。 各 个 栏 是 
由 浮动 元 素 构 成 的 , 为 了 防止 布局 变 宽 导致 石 边 的 栏 “ 下 滑 ”, 不 要 给 容器 添加 内 边 
距 ， 而 是 把 水 平 内 边 距 加 到 内 部 div 上 。 是 不 是 ?这 些 你 都 知道 了 。 与 其 再 把 那些 
CSS 罗列 一 遍 ， 不 如 专门 讲 几 个 特殊 的 CSS 片段 ,看 看 要 在 包含 上 百 个 HTML 元 素 
的 复杂 标记 中 如 何 精确 地 选择 元 素 。 





y 
Q 本 例 完整 的 CSS 代码 ， 可 以 在 本 书 网 站 下 载 : http:/www.stylinwithcss.com。 
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5.4 多 行 多 栏 布局 


5.4.1 CSS 选 择 符 的 实际 应 用 


a. 
»* 


x» 


有 必要 的 话 ， 请 读者 自行 参考 第 2 章 有 关 选 择 符 的 内 容 。 


随 着 页 面 变 得 越 来 越 复 杂 ， 相 同 的 HTML 元 素 (如 section、article、nav， 等 等 ) 
会 出 现 很 多 次 一 一 比如 ， 前 面 布局 中 的 article 就 出 现 了 7 次 。 为 了 选择 某 个 元 素 ， 
必须 区 分 这 些 相 同 的 标签 名 。 为 此 ， 有 些 新 手 会 给 每 个 标签 都 添加 一 个 不 同 的 类 名 。 
但 这 种 做 法 是 不 值得 提倡 的 。 不 仅 因为 类 本 身 就 不 该 这 么 用 (类 应 该 用 于 标记 具有 
相同 特征 的 元 素 )， 而 且 这 么 多 类 会 把 标记 弄 得 很 乱 , 让 CSS 也 很 难看 懂 。 为 了 知道 
每 个 类 代表 哪个 元 素 ， 你 必须 不 断 地 查看 HTML。 





更 好 的 做 法 是 给 标记 中 每 个 主要 区 域 的 项 级 元 素 添加 一 个 ID ,这 也 是 使 用 ID 的 正确 
方式 ，ID 就 是 标识 页 面 中 唯一 元 素 用 的 。 然 后 ， 这 些 ID 就 会 成 为 HTML 标记 中 的 
“路 标 ”， 放 在 上 下 文选 择 符 开头 的 时 候 ， 它 们 就 能 起 到 框 定 后 代 元 素 的 作用 。 这 就 
是 在 标记 中 保持 类 和 ID 属性 最 少 的 秘诀 。 而 且 ， 相 应 的 上 下 文选 择 符 也 能 清晰 地 传 
达 出 路 径 信息 ， 让 人 从 CSS 中 一 眼 就 能 看 出 它 要 选择 哪个 元 素 。 











英文 中 经 常用 hook (这 里 译 为 “路 标 ”， 也 有 译 为 “钩子 ”的 )， 表 示 代 码 中 一 个 唯 
一 的 参照 点 ， 其 他 代码 通过 这 个 参照 点 可 以 与 相应 的 代码 交互 。 


再 看 看 前 面 的 HTML 标记 。 其 中 的 三 个 ID 是 我 精确 选择 任意 元 素 唯一 必要 的 几 个 
“路 标 ”， 即 使 再 给 布局 中 添加 一 些 内 容 元 素 ， 悉 人 也 用 不 着 更 多 了 ， 项 多 再 多 几 个 。 
至 于 具体 怎么 使 用 它们 ， 下 面 我 就 通过 为 第 四 行 的 栏 添 加 边框 来 演示 。 


这 一 行 的 顶级 元 素 是 一 个 ID 为 feature area 的 section。 这 个 容器 中 包含 三 个 
article 元 素 ， 分 别 作为 一 栏 。 下 面 来 看 看 这 一 行 的 CSS。 


/* 每 个 article 作为 一 个 浮动 栏 #/ 
sectionitfeature area article { 

float:left; 

width:320px; 

/* 对 于 作为 栏 的 容器 ， 只 能 添加 垂直 内 边 距 */ 

padding:10px 0; 

background:#fff; 

border-top:4px solid #f7be84; 
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/# 为 所 有 内 容 金 子 添加 公共 样式 */ 
sectionitfeature area article .inner ( 
margin:10px 20px; 
padding:5px; 
background:#fff; 
border:5px solid; 
} 
/* 以 下 三 条 分 别 为 三 个 内 容 例子 设 定 样式 */ 
section#feature area article:nth-child(1) .inner { 
border-color:#d7dd6f; 
} 
section#feature area article:nth-child(2) .inner { 
border-color:#f6dec5; 
} 
section#feature area article:nth-child(3) .inner { 
border-color:id1d8e4; 
} 


我 用 section#feature area article 选择 了 三 个 盒子 , 用 一 条 规则 声明 了 这 些 元 素 共 
有 的 样式 ， 包 括 宽度 、 内 边 距 、 边 框 等 。 这 样 ， 对 这 三 个 盒子 只 需 维护 一 组 声明 
即 可 。 


然后 ， 通 过 三 条 规则 分 别 为 三 个 盒子 设 定 独 特 的 样式 。 下 面 就 是 为 第 二 个 内 部 div 
应 用 样式 的 规则 : 





sectionffeature area article:nth-child(2) .inner { 
border:5px solid #f6dec5;} 








从 后 往 前 ， 这 条 规则 的 意思 是 : 选择 类 为 inner 的 元 素 ， 它 必须 是 父 元 素 中 的 第 二 
个 article， 而 且 这 个 article 必须 包含 在 ID 为 feature area 的 section 元 素 中 ， 
将 它 的 边框 设 定 为 淡 橙 色 。 


显然 ,只 要 顶级 元 素 上 有 一 个 卫 , 我 们 就 可 以 把 它 作为 “路 标 ”, 进而 选择 它 的 任意 
后 代 元 素 (甚至 能 够 选择 将 来 才 会 加 入 其 中 的 内 容 元 素 )。 另 外 ， 同 样 重 要 的 是 ， 这 
样 也 避免 了 无 意 中 把 样式 添加 给 标记 中 的 其 他 元 素 上 。 如 果 在 没有 别 的 手段 让 你 选 
择 某 个 特定 元 素 的 情况 下 ， 只 在 标记 中 添加 一 个 类 或 一 个 ID , 那么 HTML 就 能 保持 
清晰 整洁 ， 而 CSS 也 将 易 读 易 维 护 。 











5.5 小结 


5.4.2 ”内 部 DIV 实战 


3.5 


这 个 布局 也 非常 恰当 地 演示 了 内 部 div 承担 的 定位 和 样式 这 两 个 角色 。 具 体 来 说 ， 
这 个 布局 中 的 内 部 div 不 仅 确 保 了 水 平 内 边 距 不 会 破坏 布局 ， 另 外 也 承担 了 一 个 视 
觉 功 能 一 一 内 容 区 的 彩色 边框 就 是 它们 的 边框 。 它 们 的 父 元 素 article 在 页 面 中 是 看 
不 到 的 , 但 为 了 让 你 看 见 ， 我 临时 给 中 间 的 article 应 用 一 个 背景 色 ， 如 图 5-14 
所 示 。 











5-1 ”中 间 的 article 元 素 拥有 灰色 背景 


从 中 间 带 灰色 背景 的 article 元 素 可 以 看 出 , 这 一 行 中 的 三 个 article 充满 了 容 需 元 
素 section, 而且 彼此 之 间 亲 密 无 间 。 





再 强调 一 次 吧 ， 每 一 栏 中 的 间距 要 依靠 内 部 div。 这 个 例子 中 的 水 平 间 距 是 由 内 部 
div 的 左 、 右 外 边 距 生成 的 ， 它们 把 这 个 div 压缩 了 一 下 ， 这 才 使 内 容 远 离 了 父 元 素 
article ( 如 果 此 时 直接 给 article 元 素 应 用 水 平 内 边 踢 的话 , 一 定 会 破坏 布局 )。 而 
每 一 栏 中 的 垂直 间 中 是 由 父 元 素 的 内 边 距 生成 的 。 为 什么 要 用 父 元 素 呢 ?原因 前 面 
也 提 到 过 ， 就 是 在 父 元 素 没 有 上 、 下 边框 的 情况 下 ， 子 元 素 的 上 、 下 外 边 距 会 折 
ZH 


到 此 为 止 ， 我 们 关于 这 个 布局 的 讨论 就 告 以 段落 了 。 相 信 读 者 对 如 何 使 用 上 下 文选 
择 符 一 定 有 了 深刻 的 理解 。 等 到 第 7 章 ， 我 们 还 将 以 这 个 布局 为 基础 ， 创 造 出 不 一 
样 的 设计 。 


小 结 


KE, 我 们 知道 了 可 以 用 浮动 的 有 宽度 的 元 素 , 以 及 利用 表格 行为 来 创建 多 栏 布局 。 
我 们 学 习 了 如 何 让 固定 布局 在 页 面 上 居中 , 也 学 习 了 让 它们 在 一 定 范围 内 可 以 伸缩 。 
更 重要 的 是 ， 你 知道 了 如 何 使 用 内 部 div 在 浮动 元 素 中 生成 间距 ， 而 又 不 会 改变 布 
局 的 总 宽度 。 另 外 ,还 掌握 了 所 谓 的 “人 造 栏 ”技术 。 
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你 明白 了 ID 和 类 的 真正 用 途 ， 就 是 不 要 把 它们 当成 元 素 的 标签 ， 而 是 要 把 它们 作为 
上 下 文中 的 “路 标 ”。 这 样 ， 才 能 让 标记 中 的 ID 和 类 保持 最 少 。 等 到 第 7 w, RN 
会 在 本 章 最 后 这 个 布局 的 基础 上 ， 融 合 下 一 章 要 讨论 的 界面 组 件 ， 创 造 出 一 个 完整 
的 页 面 框架 。 第 6 章 要 介绍 的 界面 组 件 包 括 菜 单 、 表 单 、 弹 出 框 ， 等 等 。 让 我 们 开 
始 吧 。 


7r I0 2H PE 


界面 组 件 是 我 对 HTML 提供 的 常见 用 户 界 面 (UI, User Interface ) 元 素 的 称呼 ， 包 
插 列 表 和 表单 等 。 实际 上 , 下拉 菜 单 和 弹出 层 也 是 很 常用 的 界面 组 件 , 只 不 过 HTML 
没有 提供 对 应 的 原生 标签 而 已 ， 本 章 也 将 介绍 如 何 通 过 标记 和 样式 实现 它们 。 














除了 介绍 怎么 实现 这 些 界面 组 件 ， 我 还 会 告诉 你 怎么 写 代 码 才能 更 方便 地 重用 这 些 
组 件 ， 省 得 每 次 都 从 头 写 。 另 外 ， 我 还 会 告诉 你 怎么 把 它们 放 到 重用 样式 表 中 ， 以 
备 将 来 在 不 同 的 项 目 中 派 上 用 场 。 


每 个 站 点 都 需要 导航 。 那 就 让 我 们 从 导航 菜单 开始 讲 吧 ， 看 看 怎么 把 HTML 中 的 列 
表 变 成 动态 的 菜单 。 

访问 本 书 网 站 http:/www.stylinwithcss.com 可 以 在 线 阅 读 没 有 包含 在 本 书 中 的 一 章 ， 
其 中 讲 到 了 表格 和 列表 的 基础 知识 ， 还 提供 了 完整 的 源 代码 。 


n$m ee 
导航 菜单 
菜单 由 一 组 链接 组 成 。 用 HTML 中 的 列表 元 素 ( ul 或 ol ) 来 分 组 链接 不 仅 符 合 逻 辑 ， 


而 且 即 使 没有 额外 的 CSS 也 能 适当 显示 链接 的 层次 。 默认 情况 下 ,由 于 列表 项 (li) 
ERRI, HEESE TEZ. 
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6.1.1 纵向 菜单 
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先 从 最 简单 的 情况 开始 讲 ， 通 过 下 面 这 个 简单 的 例子 ， 你 会 知道 把 列表 转换 成 菜单 
的 关键 技术 。 


«nav class-"list1"» 
«ul» 
<li><a href="#">Alternative</a></li> 
<li><a href="#">Country</a></li> 
<li><a href="#">Jazz</a></li> 
<li><a href="#">Rock</a></li> 
</ul> 
</nav> 


以 上 标记 给 每 个 列表 项 的 文本 都 加 了 链接 标签 ,让 它们 都 变 得 可 以 点 击 。( 每 个 链接 
中 的 # 是 URL 占 位 符 ， 将 来 可 以 替换 成 真正 的 URL. ) 





首先 ， 我 们 通过 第 一 个 例子 来 展示 几 个 问题 ， 很 多 初学 者 在 为 导航 链接 写 样式 的 时 
候 都 会 遇 到 这 些 问题 。 然 后 ， 再 告诉 你 怎么 解决 它们 。 无 论 如 何 ， 这 些 CSS 应 用 到 
HTML 之 后 ， 会 得 到 一 个 看 起 来 很 简洁 的 菜单 ， 如 图 6-1 所 示 。 


/* 去 掉 默 认 的 内 边 距 和 外 边 距 */ 

* {margin:0; padding:0;} 

/* 设 定 本 例 中 菜单 的 大 小 和 位 置 */ 

nav {margin:50px; width:150px;} 

/* 给 菜单 加 上 边框 */ 

.list1 ul {border:1px solid #f00; border-radius:3px; 

padding:5px 10px 3px;} 

/* 去 掉 项 目 符号 并 为 链接 添加 间距 */ 

.list1 li {list-style-type:none; padding:3px 10px;} 

/*“ 非 首位 子 元 素 ” 选 择 符 */ 

.list1 li + li {border-top:1px solid #f00;} 

/* 为 链接 添加 样式 */ 

.list1 a {text-decoration:none; font:20px Exo, helvetica, 
arial, sans-serif; font-weight:400; color:#000; 
background:#ffed53;} 

/* 848 REI 

.list1 a:hover {color:#069;} 


6.1 导航 菜单 





Alternative 
Country 


Jazz k 
Rock 














6-1 应 用 样式 之 后 的 无 序列 表 ， 从 箭头 光标 可 知 ， 没 有 文本 的 区 域 是 不 能 点 击 的 
添加 这 些 样式 没什么 难度 。HTML5 新 增 的 nav 元 素 在 语义 上 很 恰当 ， 因 此 我 们 用 它 
作为 导航 菜单 的 容 咒 ， 还 给 它 添加 了 一 个 类 作为 设 定 样式 的 上 下 文 。 


使 用 “ 非 首 位 子 元 素 ” 选 择 符 


前 面 的 CSS 代码 中 有 两 点 特别 值得 一 说 。 首 先 ， 加 粗 的 1i+ 1 选择 符 的 意思 是 “ 任 
何 跟 在 li 之 后 的 li". 


对 于 连续 的 元 素 一 一 比如 这 里 多 个 li, 这 个 选择 符 会 选择 除 第 一 个 之 外 的 所 有 1i 76 
素 。 这 样 ， 就 可 以 给 除 第 一 个 1 之 外 的 所 有 列表 项 上 方 加 一 条 边框 。 假 如 我 只 简单 
使 用 li 选择 符 ， 那 第 一 个 列表 项 上 方 也 将 被 加 上 边框 ， 而 这 不 是 我 们 想 要 的 。 我 把 
这 种 选择 符 称 为 “ 非 首位 子 元 素 ” 选 择 符 ， 它 在 选择 列表 时 非常 实用 。 当 然 ， 也 有 
实现 相同 效果 的 其 他 方法 ， 比 如 : 

/* 给 所 有 li 上方 添 加 一 条 边框 */ 

li {border-top:1px solid #f00;} 

/* 去 掉 第 一 个 1 上方 的 边框 */ 

li:first-child {border-top:none;} 

让 列表 行 可 以 点 击 


在 图 6-2 中 ， 我 为 每 个 链接 都 加 上 了 背景 色 ， 以 便 显示 相应 链接 可 点 击 区 域 的 大 小 。 
如 图 所 示 ， 目 前 只 有 文本 是 可 以 点 的 ， 因 为 链接 ( a ) 是 行内 元 素 ， 它 会 收缩 并 包 住 
其 中 的 文本 。 然 而 ， 更 好 的 用 户 体验 是 让 列表 项 所 在 的 整 行 都 能 点 击 。 之 所 以 要 重 
点 讲 这 个 问题 ， 是 因为 我 发 现 很 多 站 点 都 没有 这 么 做 。 结 果 就 是 用 户 必 须 用 鼠标 点 
击 文本 ， 点 击 文本 之 外 的 地 方 没 有 反应 。 

此 外 ， 在 每 个 1 元 素 的 上 方 和 下 方 ， 各 有 3 像素 的 内 边 距 ， 导 致 链接 文本 与 列表 项 


边框 之 间 有 了 距离 。 正 因为 了 这 段 距离 ， 当 用 户 和 鼠标 移动 到 链接 间 的 间 际 时 ， 光 
标 会 从 “ 晤 停 于 链接 之 上 ”时 的 小 手 形状 ， 变 成 常规 的 箭头 形状 。 
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Alternative Alternative 
Country Country 
Jazz Jazz 

Roc Rok 

















图 6-2 ”临时 加 的 青 景 色 让 我 们 看 清 了 a 元 素 实际 可 以 点 击 的 区 域 大 小 ， 如 图 所 示 ， 
光标 在 经 过 两 个 链接 的 间隙 时 从 小 手 变 成 了 指针 


要 解决 上 述 问题 ， 首 先 得 把 内 边 距 从 1i 元 素 转移 到 链接 内 部 ， 然 后 让 链接 完全 十 满 
整个 列表 项 。 


* (margin:0; padding:0;] 
nav (margin:50px; width:150px;] 

.list1 ul {border:1px solid #f00; border-radius:3px; 
padding:5px 10px 3px;j 

.listi li (list-style-type:none; padding:3px-10px;] 

.listi li + li a (border-top:1px solid #f00;} 

.listi a (display:block; padding:3px 10px; textdecoration: 

none; font:20px Exo, helvetica, arial, sansserif; 

font-weight:400; color:#000; background:#ffed53;} 

.list1 a:hover {color:#069;} 


把 选择 符 li + 二 变 成 二 + li a， 就 可 以 把 上 边框 添加 到 列表 项 后 面 的 列表 项 所 包 
含 的 链接 元 素 上 ( 虽然 有 点 绕 , 但 你 应 该 明白 我 的 意思 吧 ? )。 ME, 我 还 把 内 边 距 
从 列表 项 转移 到 了 链接 内 部 。 这 样 ， 链 接 上 下 就 互相 接触 了 ， 中 间 没 了 间 际 ， 鼠 标 
经 过 时 光标 状态 也 不 会 变 了 。 最 后 ， 还 要 把 每 个 链接 的 display 属性 设 定 为 block， 
这 样 链接 元 素 的 盒子 就 会 由 “收缩 包围 内 容 ” 变 成 “扩展 填充 父 元 素 "。 换 句 话说 ， 
链接 的 可 点 击 区 域 将 扩大 到 整个 列表 行 。 图 6-3 清晰 地 说 明了 经 过 这 些 改进 后 的 效果 。 











Alternative Alternative 
Country Country 
Jazz & Jazz & 
Rock Rock 








图 6-3 每 个 链接 都 填 满 了 整个 列表 项 ， 
击 区 域 ， 而 右 图 则 显示 了 去 掉 测试 用 的 





所 以 整个 区 域 都 可 以 点 击 了 。 左 图 的 青 景色 显示 了 可 点 
色 之 后 的 最 终 效果 


6.1 导航 菜单 


6.1.2 ”横向 菜单 


默认 情况 下 ， 列 表 项 是 垂直 堆 县 在 一 起 的 。 不 过 ， 要 把 它们 变 成 水 平 排列 的 横向 莱 
单 也 十 分 容易 。 方 法 就 是 浮动 列表 项 。 比 如 下 面 这 个 简单 的 列表 : 





«nav class-"listi1"» 
«ul» 
<li><a href-"i"»Shirts«/a»«/li» 
<li><a href="#">Pants</a></li> 
<li><a href="#">Dresses</a></li> 
<li><a href="#">Shoes</a></li> 
<li><a href="#">Accessories</a></li> 
</ul> 
</nav> 


和 下 面 这 些 与 前 面 创 建 纵向 菜单 很 相似 的 CSS: 


.list1 ul ( 
/* 5&9] ul & En d li 元 素 */ 
overflow:hidden; 

} 

.list1 li ( 
/*ik li 元 素 水 平 排列 */ 
float:left; 
/* 去 掉 项 目 符号 */ 
list-style-type:none; 

} 

.list1 a { 
/* 让 链接 填 满 ]i 元 素 */ 
display:block; 
padding:O 16px; 
/* 去 掉 链 接 的 下 划 线 */ 
text-decoration:none; 
color:#999; 

} 

.list1 li + li a (border-left:1px solid #aaa;} 

.list1 a:hover {color:#555;} 
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图 6-4 简单 的 水 平 菜单 


图 6-4 这 个 水 平 菜 单 是 不 是 很 常见 ? 没 错 , 很 多 时 尚 的 零售 网 店 都 有 它们 的 身影 。 请 
容 我 咖 嗪 几 句 ， 解 释 解 释 上 面 的 Css 代码 : 浮动 让 li 元 素 从 垂直 变 成 水 平 ， 
display:block 让 链接 从 收缩 变 成 扩张 ， 从 而 整个 li 元 素 都 变 成 了 可 以 点 击 的 。 另 
外 ,选择 符 li + li a 为 除 第 一 个 链接 之 外 的 每 个 链接 左 侧 都 加 了 一 条 竖 线 ， 作 为 视 
觉 分 隔 线 。 好 啦 ， 可 以 讲 更 复杂 的 样式 了 。 


6.1.3 下 拉 菜 单 
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在 我 收 到 的 邮件 中 ， 询 问 下 拉 菜 单 问 题 的 最 多 。 所 以 ， 本 节 我 就 来 给 大 家 彻底 讲 清 
楚 ， 看 一 看 到 底 什么 是 下 拉 菜 单 ， 怎 么 创建 下 拉 菜 单 ， 下 拉 菜 单 有 什么 变化 形式 。 
下 拉 菜 单 是 以 一 组 内 套 列表 为 基础 ， 毕 合 运 用 我 们 刚刚 学 到 的 纵向 和 横向 菜单 的 
CSS 技术 创建 的 。 图 6-5 展示 了 一 个 下 拉 菜 单 。 


Power | money | Love EE 


B Sieen 
Web Designer Springsteen 








Mick Jagger 





图 6-5 三 级 下 拉 菜 单 
为 方便 设 定 菜单 样式 ， 我 为 列表 容器 nav 添加 了 multi drop menu 类 。 这 个 菜单 的 每 
一 条 CSS 规 则 都 以 .multi_drop_menu 开 头 , 以 确保 它们 只 会 应 用 给 带 有 这 个 类 的 容器 。 


下 拉 荣 单 的 标记 是 在 前 面 菜单 例子 基础 上 扩充 而 来 的 。 下 面 就 是 所 有 标记 ， 虽 然 看 
起 来 挺 吓 人 ,但 实际 上 不 过 是 一 个 简单 的 三 层 藤 套 列 表 而 已 。 
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«nav class-"multi drop menu"» 
《1-- 一 级 开始 --> 
«ul» 
<li><a hrefz"i"»Power«/a»«/li» 
<li><a hrefz"it"»Money«/a»«/li» 
<li><a hrefz"i"»Love«/a»«/li» 
<li><a hrefz"i"»Fame«/a» 
《1-- 二 级 开始 --> 
«ul» 
<li><a href="#">Sports Star«/a»«/li» 
<li><a href="#">Movie Star«/a»«/li» 
<li><a href="#">Rock Star«/a» 
《1-- 三 级 开始 --> 
«ul» 
<li><a href="#">Bruce Springsteen«/a»«/li» 
<li><a hrefz"i"»Bono«/a»«/li» 
<li><a href="#">Mick Jagger«/a»«/li» 
<li><a href="#">Bob Dylan«/a»«/li» 


«/ul» 
<l-- 三 级 结束 --> 
</li> 
<li><a href="#">Web Designer</a></li> 
</ul> 
<l-- 二 级 结束 --> 
</li> 
</ul> 
《1-- 一 级 结束 --> 
«/nav» 


以 上 标记 只 包含 图 6-5 中 展示 的 菜单 项 。 WREE TRK did mE RIP, 方法 是 在 标 
记 中 找到 相应 链接 ， 把 包含 子 菜 单项 的 无 序列 表 加 在 链接 之 后 、 包 含 它 的 1i 元素 结 
束 标签 之 前 。 一 会 儿 你 就 知道 了 ， 这 样 做 无 须 更改 CSS。 下 面 就 从 创建 水 平 的 顶级 
菜单 开始 吧 。 





顶级 菜单 

以 下 是 顶级 菜单 的 CSS 〈 请 配合 注释 理解 它们 的 作用 ): 

/* 添 加 视觉 样式 */ 

.multi drop menu {font:1em helvetica, arial, sans-serif;} 


.multi drop menu a { 


- 191 - 


第 6 章 界面 组 件 


/* 让 链接 充满 列表 项 */ 
display:block; 

/*# 文 本 颜色 #/ 

color:#555; 

/* 背 景 颜色 #/ 
background-color:#eee; 

/* 链 接 的 内 边 距 */ 

padding: .2em 1em; 

/* 分 隔 线 宽度 */ 
border-width:3px; 

/* 可 以 有 了 颜色， 也 可 以 路 明 */ 
border-color:transparent; 


} 

.multi drop menu a:hover { 
/* 基 和 停 时 文本 闫 色 */ 
color:#fff; 
[EAR EX E 
background-color:$iaaa; 

} 

.multi drop menu a:active { 
/* 点 击 时 背景 变色 */ 
background:#fff; 

/* 点 击 时 文本 变色 */ 
color:#ccc; 

} 

/* 添 加 功能 样式 */ 


.multi drop menu * {margin:0; padding:0;} 
/* 5&3) ul 包围 li*/ 
.multi drop menu ul {float:left;} 
.multi drop menu li { 
/* 水 平 排列 菜单 项 */ 
float:left; 
/* 去 掉 默 认 的 项 目 符号 */ 
list-style-type:none; 
/* 为 子 菜单 提供 定位 上 下 文 */ 
position:relative; 
} 
.multi drop menu li a ( 
/* 让 链接 填充 列表 项 */ 
display:block; 
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/* 给 每 个 链接 添加 一 个 右边 框 */ 
border-right-style:solid; 

/* 背 景 只 出 现在 内 边 距 区 域 后 面 */ 
background-clip:padding-box; 
/* 去 掉 链 接 的 下 划 线 */ 
text-decoration:none; 


} 
.multi drop menu li:last-child a {border-right-style:none;} 


/* 临 时 隐藏 低级 菜单 */ 
.multi drop menu li ul {display:none;} 


"Power | money T Love [E2778 


图 6-6 ”顶级 菜单 项 ， 此 刻 鼠 标 正 按 住 未 释放 ， 因 此 有 :active 效果 


对 于 图 6-6 的 CSS 样式 ， 首 先 要 注意 的 是 ， 我 把 菜单 的 视觉 样式 与 功能 样式 分 开 来 
写 了 。 视 觉 样式 控制 字体 大 小 、 边 框 和 文本 的 颜色 ， 功 能 样式 控制 菜单 的 布局 和 行 
为 。 两 者 的 区 别 通 过 代码 注释 是 很 容易 分 辨 的 。 对 于 下 拉 菜 单 这 么 复杂 的 组 件 ， 分 
开 来 写 视觉 和 功能 代码 是 非常 值得 提倡 的 。 这 样 ， 将 来 如 果 有 人 要 修改 菜单 外 观 ， 
只 要 修改 它 的 视觉 样式 就 好 了 ， 而 功能 样式 可 以 原封 不 动 。 








如 果 你 在 代码 中 像 这 样 把 视觉 样式 与 功能 样式 分 开 来 写 ， 那 一 定 要 用 注释 说 明 为 
什么 5 


目前 ， 最 明显 的 变化 还 是 li 通过 浮动 由 垂直 堆 蓓 变 成 了 水 平 排列 。 至 于 为 了 让 ul 
包围 列表 项 ， 没 有 使 用 overflow:hidden， 而 是 使 用 了 float:left， 是 因为 前 者 会 导 
致 后 来 添加 到 下 拉 荣 单 中 的 子 荣 单 无 法 显示 它们 最 终 会 显示 在 父 元 素 ul 的 外 
面 ， 结 果 会 因为 “溢出 ”( overflow ) 而 被 隐藏 (hidden )。 


为 了 保证 用 户 体验 ， 所 有 视觉 样式 一 一 内 边 距 、 背 景 、 边 框 ， 等 等 ， 都 要 应 用 给 链 
接 a， 而 不 要 应 用 给 ula li, WERK (可 点 击 区 域 ) 最 大 化 ， 让 用 户 鼠 标 经 过 时 
不 会 产生 前 面 例子 中 看 到 的 状态 切换 。 为 达到 这 个 目的 ， 同 时 还 要 从 视觉 上 分 隔 链 
接 , 我 们 使 用 了 background-clip:padding-box 声明 , 这 样 就 可 以 阻止 链接 的 背景 ( 像 
常规 状态 下 一 样 ) 延伸 到 边框 后 面 。 然 后 ， 让 边框 透明 ( 也 可 显示 为 其 他 实 色 ), 在 
链接 之 间 产 生 间 险 ， 让 后 面 的 页 面 能 够 透 过 边框 被 看 到 。 如 此 一 来 ， 不 用 外 边 距 也 
能 分 隔 链接 ， 而 且 鼠 标 从 一 个 菜单 项 移动 到 另 一 个 菜单 项 时 ， 也 不 会 出 现 光 标 切 换 。 
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菜单 项 之 间 从 视觉 上 是 分 开 ， 但 实际 上 却 是 紧 挨 在 一 块 的 。 


要 了 解 background-clip 和 透明 边框 的 更 多 用 法 ,可 以 阅读 文章 : http://css-tricks. 


com/transparent-borders-with-background-clip ; 


或 许 你 注意 到 了 , 我 给 li 元 素 应 用 了 position:relative, 这 是 给 添加 子 菜单 作 准 备 
的 ， 在 当前 这 一 步 里 实际 上 它 没有 什么 效果 。 男 外 ， 最 后 一 行 CSS 隐藏 了 子 菜单 ， 
以 防 显 示 它 们 影响 我 们 创建 顶级 菜单 。 在 后 面 两 步 中 ， 我 会 告诉 你 怎么 在 菜单 项 处 
于 悬 停 状 态 时 显示 它们 。 


第 一 步 为 项 级 菜单 添加 的 样式 都 会 被 次 级 菜单 继承 。 换 句 话说 ,需要 应 用 给 子 菜 单 
的 样式 大 部 分 都 已 经 写 完 啦 ! 


菜单 的 下 拉 部 分 


虽然 子 菜 单 继承 顶级 菜单 的 样式 为 我 们 提供 了 方便 ,但 其 实 有 些 样式 在 子 菜单 中 并 
不 是 必要 的 。 比 如 ，( 列表 的 第 二 级 ) FAREEZ, MARERE E 
的 列表 项 继承 浮动 而 变 成 水 平 排列 。 男 外 ， 顶 级 菜单 使 用 右边 框 作为 分 隔 线 ， 而 下 
拉 菜 单 需要 使 用 上 边框 来 分 隔 垂 直 堆 蕉 的 菜单 项 。 这 一 步 ， 我 们 还 会 绝对 定位 下 拉 
菜单 ， 以 便 它 能 精确 地 对 齐 父 元 素 ( 包含 子 菜单 的 1i )， 而 这 个 父 元 素 已 经 在 上 一 步 
被 设 定 成 相对 定位 了 。 








与 此 同时 ,为 了 看 到 这 些 设 定 的 效果 ,还 要 显示 二 级 下 拉 菜 单 ， 并 继续 隐藏 三 级 下 
DDR (下 一 步 再 考虑 它 )。 


以 下 是 实现 上 述 改变 需要 添加 的 CSS: 


/* 添加 的 视觉 样式 */ 

/* 二 级 菜单 宽度 */ 

.multi drop menu li ul {width:9em;} 

.multi drop menu li li a { 
/* 去 掉 继 承 的 右边 框 */ 
border-right-style:none; 
/* 添 加 上 边框 */ 
border-top-style:solid; 

} 

/* 添加 的 功能 样式 */ 

.multi drop menu li ul { 
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/* 临 时 显示 二 级 下 拉 莱 单 */ 
display:block; 
/* 相 对 于 父 菜 单项 定位 */ 
position:absolute; 
/* 左 边 与 父 菜 单项 对 齐 */ 
left:0; 
/* 顶 边 与 父 莱 单 项 底 边 对 齐 */ 
top:100%; 

} 


.multi drop menu li li ( 
/ Fabi, WROREA*/ 
float:none; 


} 


.multi drop menu li li ul { 
/# 继 续 隐 藏 三 级 下 拉 莱 单 #/ 
display:none; 


Web Designer 





图 6-7 二 级 下 拉 菜 单 已 经 显示 在 其 父 菜 单项 下 方 

这 一 步 成 功 的 关键 是 下 拉 菜 单 的 绝对 /相对 定位 。 通 过 将 其 顶 边 位 置 (top) WEN 
100% ( 相对 于 其 相对 定位 的 父 元 素 li), 其 项 边 会 与 父 元 素 底 边 恰 好 对 齐 。 它 与 父 元 
素 之 间 的 间隙 ,实际 上 是 下 拉 菜 单 中 第 一 个 链接 的 边框 ， 参 见 图 6-7。 





让 下 拉 菜 单 响 应 鼠标 事件 


接 下 来 是 好 玩 的 部 分 了 ， 即 要 让 下 拉 荣 单 拥有 自己 的 功能 。 换 名 话说 ， 它 一 开始 是 
隐藏 的 ， 只 有 在 其 父 元 素 处 于 鼠标 悬 停 状态 时 ， 才 需要 显示 。 
.multi drop menu li ul { 


/* 隐 藏 二 级 下 拉 莱 单 */ 
display:none; 
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/* 相 对 于 父 菜 单项 定位 */ 
position:absolute; 
/# 左 边 与 父 菜单 项 对 齐 */ 
left:0; 
/* 顶 边 与 父 菜单 项 底 边 对 齐 */ 
top:100%; 

} 

.multi drop menu li:hover > ul { 
/*# 父 元 素 悬 停 时 显示 */ 
display:block; 


Power | money | Love | Fare IN [Power | money | ove MEEN 
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图 6-8 ”鼠标 移动 到 链接 上 ， 其 子 菜单 就 会 显示 出 来 
让 菜单 起 作用 的 关键 在 于 先 把 它 藏 起 来 : 


/* 隐 藏 二 级 菜单 */ 
li ul {display:none;} 


然后 ， 再 在 父 元 素 悬 停 时 把 它 显 示 出 来 : 


/* 显 示 二 级 菜单 */ 

li:hover > ul {display:block;} 

最 后 一 行 CSS 的 意思 是 : 当 鼠 标 移 动 到 列表 项 上 时 ， 就 显示 它 的 子 列表 。 注 意 ， 这 
里 的 :hover 触发 器 是 设 定 在 li 元 素 而 非 链接 自身 上 的 。 这样 做 是 因为 我 们 想 要 显示 
li 的 子 元 素 uL， 而 它 不 是 想 链接 的 子 元 素 。 此 外 ， 为 了 只 显示 其 子 元 素 ， 甚 停 列 表 
项 与 子 列表 之 间 还 有 一 个 子 选择 符 >， 结 果 如 图 6-8 所 示 。 如 果 没 有 这 个 子 选 择 符 ， 
当 顶 级 荣 单 项 处 于 悬 停 状 态 时 ， 会 同时 显示 二 级 和 三 级 菜单 。 





添加 三 级 菜单 


接 下 来 我 们 就 趁 热 打铁 ， 把 三 级 菜单 也 和 弄 好 吧 。 实 际 上 ， 这 时 候 三 级 菜单 已 经 算是 
能 用 了 。 不 信 ? 找到 图 6-8 的 示例 代码 ， 在 浏览 器 中 打开 ， 然 后 用 鼠标 触发 子 菜单 ， 
就 会 看 到 图 6-9 所 示 的 效果 。 


6.1 导航 菜单 
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Mick Jagger 
Bob Dylan 


图 6-9 在 父 元 素 处 于 鼠标 之 下 时 ， 三 级 菜单 也 会 显示 ， 只 不 过 位 置 不 对 


由 于 前 面包 含 :hover 的 CSS 规则 会 像 应 用 给 二 级 菜单 一 样 ， 应 用 给 三 级 菜单 ， 所 以 
在 父 元 素 处 于 鼠标 之 下 时 , 三 级 荣 单 自然 也 会 显示 出 来 。 可 是 , 图 6-9 中 的 三 级 菜单 
被 其 父 元 素 挡住 了 。 这 时 候 三 级 菜单 与 其 二 级 父 元 素 的 位 置 是 什么 关系 ? «ETE. WE 
是 二 级 菜单 与 顶级 荣 单 的 关系 。 所 以 , 三 级 菜单 跑 到 了 鼠标 下 的 二 级 菜单 后 面 去 了 ， 
而 且 其 第 一 项 顶 边 与 悬 停 的 父 妆 单项 底 边 是 对 齐 的 。 从 图 中 可 以 看 到 ， 三 级 菜单 第 
一 项 “Bruce Springsteen” 的 上 半 部 分 被 二 级 菜单 最 后 一 项 “Web Designer” 给 盖 
住 了 。 


我 们 在 这 一 步 要 做 的 ， 就 是 把 三 级 菜单 放 到 二 级 菜单 右 人 出 ， 让 它 的 顶 边 与 鼠标 所 在 
菜单 项 的 底 边 对 齐 。 








.multi drop menu li li ul { 

/# 相 对 于 父 菜 单 定 位 #/ 

position:absolute; 

/# 与 父 菜 单 右 侧 对 齐 *#/ 

left:10026; 

/*# 与 父 菜单 项 顶 边 对 齐 */ 

top:0; 
} 
现在 的 菜单 能 用 了 ， 参 见 图 6-10。 你 可 以 在 顶级 添加 更 多 列表 项 ， 在 标记 中 添加 更 
多 子 列表 ， 然 后 无 须 多 写 一 行 CSS， 它 们 就 能 构成 新 的 下 拉 菜 单 。 此 时 ， 我 还 想 再 
作 两 个 调整 。 首先， 为 了 真正 让 这 些 代码 有 用 ， 而 且 可 以 重用 ， 需 要 再 写 一 些 样式 ， 
让 顶级 菜单 能 够 垂直 显示 ， 以 便 能 将 其 用 在 导航 侧 边 栏 里 。 为 此 ， 我 得 先 给 nav € 
器 添加 第 二 个 类 vertical, 
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图 6-10 三 级 下 拉 菜 单 显示 在 了 二 级 菜单 旁边 
«1-- HTML 类 名 之 间 要 有 空格 --> 


«nav class-"multi drop menu vertical"» 
这 样 , 我 就 可 以 写 一 些 样式 , 让 它们 只 在 导航 容器 有 vertical 类 的 情况 下 才 起 作用 。 
所 以 ， 这 些 新 增 规则 的 选择 符 开 头 都 是 





/*CSS 类 名 之 间 没 有 空格 */ 
.multi drop menu.vertical 


这 意味 着 选择 一 个 带 有 两 个 类 的 元 素 一 一 注意 ，CSS 的 类 名 间 没 有 空格 。 


[FR AE UR CRI 
.multi drop menu.vertical (width:8em;) 
.multi drop menu.vertical li a ( 
border-right-style:none; 
border-top-style:solid; 
} 
.multi drop menu.vertical li li a {border-left-style:solid;} 
.multi drop menu.vertical ul, 
.multi drop menu.vertical li { 
/# 让 顶级 菜单 重 直 显示 #/ 
float:none; 
} 
.multi drop menu.vertical li ul { 
/* 子 菜单 左边 与 上 一 级 菜单 右边 对 齐 */ 
left:100%; 
/* 子 菜单 顶 边 与 上 一 级 菜单 项 顶 边 对 齐 */ 
top:0; 
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为 了 让 荣 单 恢复 默认 的 堆 释 状态 ， 这 里 重 置 了 顶级 li 元 素 及 其 父 元 素 ul 的 浮动 属 
性 ， 后 者 原来 浮动 是 为 了 包围 浮动 的 1 元 素 。 


这 里 还 为 nav FARE T Eo 如果 不 设 定 导 航 容 带 宽度 , 那么 nav 及 其 包含 的 顶级 
菜单 项 都 会 尽 可 能 伸展 。 最 后 ,我 们 把 二 级 菜单 与 顶级 菜单 的 位 置 关系 ， 设 定 成 了 
前 面 三 级 菜单 和 二 级 菜单 之 间 的 关系 ， 即 让 子 菜单 项 边 与 父 菜 单项 项 边 对 齐 。 当 然 ， 
还 去 掉 了 顶级 菜单 项 的 右边 框 ， 代 之 以 上 边框 ， 如 图 6-11 所 示 。 


Web Designer 


Mick Jagger 
Bob Dylan 


图 6-11 增加 了 垂直 菜单 样式 后 ， 顶 级 菜单 项 上 下 堆 蔷 起 来 了 





突出 显示 选择 路 径 


图 6-11 显示 ， 只 有 位 于 鼠标 下 方 的 元 素 才 会 突出 显示 。 为 了 让 用 户 明 确 地 知道 自己 
是 怎么 一 路 选择 下 来 的 ， 还 需要 让 每 一 级 菜单 中 被 选择 的 元 素 突 出 显示 。 实 际 上 ， 
很 简单 ， 只 要 把 .multi_drop_menu a:hover 替换 成 以 下 CSS 即 可 。 


.multi drop menu li:hover > a ( 

[E AEN I ARA E*/ 

color:#fff; 

/* 悬 停 时 的 背景 关 色 */ 

background-color:#aaa 
} 
这 个 小 小 的 替换 能 够 起 作用 , 是 因为 :hover 事件 会 沿 着 元 素 的 结构 层次 “向 上 冒 泡 ”。 
所 以 ,把 :hover 设 定 在 1i 元 素 ， 就 相当 于 也 把 它 设 定 给 了 所 有 祖先 li 元素。 然后 ， 
只 要 再 给 其 子 元 素 (BEBO) 设 定 样式 即 可 。 这 个 改进 能 够 极 大 地 提高 菜单 的 易 用 性 ， 
而 我 们 的 下 拉 菜 单 到 此 也 讲 完 了 ， 最 终结 果 如 图 6-12 所 示 。 
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图 6-12 ”每 一 级 菜单 中 的 被 选项 都 突出 显示 出 来 了 


有 了 以 上 css 文件 ， 只 要 把 它 链接 到 页 面 中 ， 并 给 一 个 包含 无 序列 表 的 容 咒 加 上 
multi_drop_menu 类 ， 该 列表 就 会 播 身 一 变 ， 成 为 一 个 全 功能 的 菜单 ， 这 个 魔术 我 会 
在 下 一 章 变 给 你 看 。 


表单 


表单 与 其 他 页 面 元 素 的 作用 不 同 。 其 他 元 素 是 把 服务 器 发 过 来 的 内 容 显示 给 用 户 ， 
而 表单 则 是 把 用 户 的 信息 发 送 给 服务 器 。 作 为 设计 者 ， 我 们 当然 希望 用 户 能 够 顺利 
地 使 用 表单 ， 从 而 得 到 他 们 的 反馈 、 意 见 、 联 系 信息 …… 当 然 一 一 还 有 他 们 的 信用 
卡号 。 大 型 表单 的 复杂 程度 较 高 ， 电 商 网 站 的 购物 车 就 是 一 例 。 假 如 设计 得 不 好 ， 
让 用 户 党 得 费解 ， 很 可 能 转眼 之 间 就 丢掉 了 生意 。 可 见 ， 设 计 的 品质 是 可 以 用 白花 
花 的 银子 来 衡量 的 。 








说 起 设计 表单 ,我 强烈 向 大 家 推荐 Luke Wroblewski 专门 写 表 单 的 书 Web Form Design: 
Filling in the Blanks: http://www.lukew.com/resources/web form design.asp。 

处 理 表单 数据 的 话题 超出 了 本 书 的 范围 ， 本 章 的 重点 在 于 告诉 你 怎么 把 表单 设计 得 
简洁 易 用 。 好 吧 ， 先 看 一 个 完整 的 表单 ， 找 找 感觉 。 


想 了 解 怎么 在 服务 器 端 验 证 表单 数据 ? 可 以 看 看 我 的 另 一 本 书 Codin'for the Web, 其 
中 讲 到 了 PHP 编程 和 MySQL 数据 库 。 


6.2 表单 


6.2.1 HTML 表 单元 素 
以 下 是 完成 后 的 表单 ， 本 节 正 是 要 介绍 怎么 设计 这 个 表单 。 


HTML5 与 表单 


HTML5 为 input 元 素 新 增 了 13 种 新 类 型 (type 属性 ) ， 也 对 表单 进行 了 大 幅 增强 ， 包 括 特 别 
特别 棒 的 placeholder 属性 ， 可 以 在 文本 框 中 显示 说 明文 字 (例如 “在 这 里 填写 用 户 名 ”) ， 
只 要 用 户 一 开始 输入 它 就 会 消失 。 


| 
和 


要 了 解 新 增 的 HTML5 表单 标签 和 属性 ， 以 及 浏览 器 对 它们 的 支持 情况 ， 可 以 参考 这 个 网 页 


http://wufoo.com/html5， 还 有 这 个 http://www.html5rocks.com/en/tutorials/forms/html5forms s 


我 们 先 把 这 个 表单 的 所 有 标记 展示 一 下 ， 然 后 再 讨论 其 中 个 别 的 HTML 元 素 。 


«1-- 必要 的 form 标签 --> 
«form class-"stylin form1" action="process form.php" method-"post"» 

«h3»A Stylin' Form«/h3» 

《1-- 控件 组 ， 即 各 种 控件 的 容器 --> 

<fieldset> 

<l-- 控件 组 的 文字 说 明 ， 或 标题 --> 

«legend»«span»Part 1 &#8226; Basic Controls«/span»«/legend» 

<l-- 开始 单行 文本 输入 控件 --> 

«section» 
«p class-"note"»* indicates required field«/p» 
«1-- for 属性 把 标注 与 控件 关联 起 来 ， 它 的 值 必 须 与 榨 件 ID 值 相同 --» 
«label for-"user name"»User Name«span» *«/span»«/label» 
<l-- text 属性 让 这 个 控件 可 以 输入 文本 --> 
«input type="text" id-"user name" name-"user name" /> 
«p»Please select a user name«/p» 

«/section» 

<1-- 开始 密码 控件 --> 

«section» 
«label for-"password"»Password«span» *«/span»«/label» 
《1-- 密码 文本 显示 为 掩 码 --> 
«input type="password" id-"password" name="password" maxlength="20" /> 
«p»Password must be 8 or more characters«/p» 

«/section» 
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<1-- 开始 多 行文 本 输入 控件 --> 
«section» 

«label for-"description"»Description«/label» 

«textarea id-"description" name-"description" 

placeholder-"Enter the description here."»«/textarea» 

«/section» 
«1-- 开始 HTML5 日 期 控件 --> 
«section» 

«label for-"description"»Date«/label» 

«input type-"date" id-"special date" name-"event date" min-"2012-09-05" /» 
«/section» 
«/fieldset» 
«fieldset» 
«legend»«span»Part 2 888226; Multiple-Choice Controls«/span»«/legend» 
《1-- 开始 复 选 框 --> 


«section» 
«h4»Select Any Number«/h4» 
«section» 
«input type="checkbox" id-"checki1" name-"checkset" value-"1" 
tabindex-"4" /» 
«label for-"checki"»Choice 1«/label» 
«/section» 
«section» 
«input type-"checkbox" checked-"checked" id-"check2" name- 
"checkset" value-"2" /» 
«label for-"check2"»Choice 2 is pre-checked«/label» 
«/section» 
«section» 
«input type="checkbox" id-"check3" name-"checkset" value-"3" /> 
«label for-"check3"»Choice 38mdash;add as many as you need! 
«/label» 
«/section» 
«p»You must choose one or more«/p» 
«/section» 
«1-- 开始 单 选 按钮 --> 
«section» 
«h4»Select Only One«/h4» 
«section» 


«input checked-"checked" id-"radioi1" name-"radioset" type="radio" 
value-"Choice 1" /» 


- 
^ 


e» 


6.2 表单 


«label for-"radioi"»Choice 1 is pre-selected and shows the text 
wraps nicely if it goes to multiple lines.«/label» 
«/section» 
«section» 
«input id-"radio2" name-"radioset" type-"radio" value-"Choice 2" /» 
«label for-"radio2"»Choice 2«/label» 
«/section» 
«section» 
«input id-"radio3" name-"radioset" type-"radio" value-"Choice 3" /» 
«label for-"radio3"»Choice 3«/label» 
«/section» 
«/section» 
《1-- 开始 选项 列表 (FIJA) - 
«section» 
«label for-"select choice"»Select Your Choice«/label» 
«select id-"select choice" name-"select choice"» 
«option value-"0"»None«/option» 
«option value-"1"»Choice 1«/option» 
«option value-"2"»Choice 2«/option» 
«option value-"3"»Choice 3«/option» 
«option value-"4"»Choice 4«/option» 
</select> 
</section> 
</fieldset> 
《1-- 开始 提交 按钮 --> 
«section» 
«input type-"submit" value-"Submit This Form" /» 
«/section» 
«/form» 


要 了 解 关 于 inut 元 素 更 详细 的 介绍 ， 可 以 参考 这 两 篇 文章 : http//htmlhelp.com/ 
reference/html40/forms/input.html ， 还 有 http://www.javascript-coder.com/html-form/ 
html-form-tutorial-p1.phtml 
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标注 一 一 一 -+ 
文本 输入 控件 一 一 一 


标注 一 一 一 | 
文本 输入 控件 一 一 一 -J 
type=password 


标注 一 一 


文本 区 控件 





标注 一 一 一 
日 期 输入 控件 一 一 一 | 


标题 文字 一 一 一 


h4 — 


复 选 框 控 件 (分 别 标注 ) ES 


h4 — 

单 选 按钮 (分 别 标注 ) 
标注 一 一 一 
选项 列表 控件 一 一 一 -J 


提交 表单 控件 一 一 一 | 
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* indicates required field 
User Name * 


Please select a user name 


Password * 


Passward must be 8 or more characters 


Description 


Date 


Select Any Number 
O Choice 1 
(VÍ Choice 2 is pre-checked 


O Choice 3—add as many as you 
need! 


You must choose one or more 


Select Only One 
图 Choice 1 is pre-selected and 
shows the text wraps nicely if it 
goes to multiple lines. 


C) Choice 2 


C) Choice 3 


Select Your Choice 


(Nome — 5) 





图 6-13 ”基于 常用 表单 元 素 创建 的 表单 
好 啦 ， 马 上 就 来 讲 一 讲 这 个 表单 的 标记 ， 先 从 最 开头 的 form 元 素 讲 起 。 


form 元 素 


所 有 表单 的 标记 都 包含 在 一 个 form 元 素 中 。 


控件 组 


控件 组 


«form class-"stylin form1" action="process form.php" method-"post"» 
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<!-- 这 里 是 表单 标记 --> 
«/form» 
form 元 素 有 两 个 必要 的 属性 : action 和 method. action 属性 用 于 指定 服务 器 上 用 来 
处 理 表单 数据 的 文件 的 URL, method (EZALE post, 要么 是 get) 用 于 指定 怎么 
把 数据 发 送 到 服务 器 。 





想 学 习 服 务 器 如 何 处 理 表单 数据 ? 推荐 看 看 这 个 网 页 http//www.javascript-coder. 
com/html-form/html-form-tutorial-phtml。 这 个 网 页 底部 还 有 不 少 与 表单 相关 的 链接 ， 


用 户 提交 表单 后 ， 他 们 在 表单 控件 中 填写 的 表单 数据 或 者 做 出 的 选择 ， 都 会 被 发 送 
到 服务 器 。 所 谓 控件 ， 是 对 表单 中 用 来 收集 数据 的 各 种 表单 组 件 的 通称 ， 包 括 文本 
框 、 复 选 框 、 单 选 按钮 ， 等 等 。 表 单 中 的 数据 是 以 “名 = 值 ”的 形式 发 送 给 服务 器 的 ， 
比如 “username=chrisconsumer”， 每 个 控件 都 是 这 人 么 一 个 名 / 值 对 形式 。 这 里 的 “名 ” 
就 是 你 在 控件 name 属性 中 设 定 的 名 字 。“ 值 ”可 能 是 用 户 在 文本 控件 中 输入 的 信息 ， 
也 可 能 是 表示 可 选 控件 (如 复 选 框 ) 中 某 一 项 是 否 被 选中 的 布尔 状态 值 〈 比如 某 个 
复 选 框 中 用 1 表示 选中 ， 用 0 表示 未 选中 )。 








在 确定 这 些 控件 的 名 字 时 ， 最 好 跟 编 程 人 员 以 及 数据 库 管 理 员 共 同 协商 ， 得 到 一 个 
大 家 都 认可 的 命名 方案 。 


控件 组 


可 以 把 一 组 相关 的 表单 控件 组 织 到 一 个 控件 组 元 素 fieldset 中 。 比 如 ， 在 一 个 电 商 
网 站 上 , 用 于 收集 用 户 姓 名 和 地 址 的 控件 组 , 可 能 会 加 上 一 个 标题 叫 “ 收 货 人 信息 ”。 
随后 可 能 就 是 另 一 个 用 于 填写 信用 卡 信 息 的 控件 组 。 








前 面 表单 标记 使 用 了 两 个 fieldset 元 素 ， 把 所 有 控件 分 成 了 两 组 。 第 一 组 包含 基本 
的 标注 和 控件 ,第 二 组 包含 更 复杂 的 控件 ， 比 如 复 选 框 ( type="checkbox" )、 单 选 按 
钮 (type="radio" ) 和 选项 列表 ( select ), fieldset 的 第 一 个 子 元 素 一 定 得 是 legend 
文本 元 素 ， 其 中 包含 这 个 控件 组 的 标题 。 











<fieldset> 
<legend>Mailing Address</legend> 
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《1--- 标注 和 控件 --> 
«/fieldset» 


从 图 6-13 中 可 以 看 到 , 我 给 两 个 控件 组 的 legend 元 素 都 加 了 灰色 条 , 文本 则 反 白 显 
示 ， 从 而 明确 表示 它们 是 两 个 独立 的 表单 区 块 。 





控件 与 标注 
表单 包含 一 或 多 个 控件 。 如 前 所 述 ， 控 件 就 是 让 用 户 勾 选 、 点 选 、 输 入 的 组 件 。 对 


于 那些 可 以 输入 的 控件 ， 大 家 又 俗 称 其 为 字段 。 每 个 表单 控件 (submit 按钮 除外 ), 
都 有 一 个 对 应 的 label 文本 元 素 ， 用 于 描述 控件 代表 的 数据 。 以 下 代码 和 图 6-14 展 
示 了 这 个 规范 的 结构 。 

«label for="user name">User Name«/label» 

《1-- 创建 一 个 文本 字段 --> 

«input type="text" id-"user name" name-"user name" /> 

«p»Please select a user name«/p» 


User Name 
chrisconsumer 


Please select a user name 





Eló-M xe REESE: 这 里 是 一 个 文本 字段 ， 通 常 都 应 该 搭配 一 个 标注 告诉 用 户 在 里 面 
填写 什么 内 容 

label 元 素 可 以 包含 控件 ,也 可 以 放 在 控件 前 头 或 后 头 。 如 果 像 前 面 那样 没有 用 label 

包含 控件 , 那么 label 的 for 属性 与 控件 的 id 属性 必须 匹配 , 以 便 把 两 者 关联 起 来 。 

不 过 ， 控 件 与 标注 之 间 的 关系 是 隐 式 存在 的 ， 而 且 如 果 label 像 下 面 这 样 包 含 控件 ， 

其 for 属性 也 不 是 必需 的 : 











for 属性 与 id 属性 通过 相同 的 值 关 联 起 来 后 ， 用 户 点 击 标注 文本 也 可 以 选择 单 选 按 
钮 和 复 选 框 。 


«label»User Name«input type="text" name-"user name" /> 
«/label» 


无 论 采 用 哪 种 方式 关联 标注 与 控件 都 没 问 题 ， 重 要 的 是 一 定 要 有 这 种 关联 。 这 种 关 
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联 对 于 屏幕 阅读 天 等 辅助 技术 解读 表单 非常 关键 。 我 个 人 习惯 于 把 label 放 在 控件 
前 面 〈 当然 对 于 复 选 框 和 单 选 按钮 ， 还 是 要 放 在 后 面 )， 因 为 这 样 更 方便 设 定 样式 。 





除了 标记 和 控件 ， 有 时 候 还 需要 告诉 用 户 如 何 填写 或 选择 ,特别 是 在 需要 填写 特定 
格式 数据 ( 如 日 期 ) 的 时 候 。HTML 中 没有 为 表单 控件 说 明 规 定 什么 标签 ， 因 此 我 
们 就 用 p 这 个 段落 元 素 吧 。 另 外 ， 说 明 的 文字 最 好 方便 在 用 户 输入 无 效 数据 的 情况 
下 突出 显示 ( 比如 变 成 红色 )， 这 样 就 不 用 单独 准备 和 控制 错误 消息 了 。 本 例 后 面 会 
介绍 怎么 做 到 这 一 点 。 











当然 ， 如 果 你 希望 在 用 户 输入 无 效 数据 时 显示 不 同 于 说 明 的 错误 消息 ， 可 以 再 添加 
一 个 p 元素， 并 赋予 它 .efror 类 。 


控件 类 型 


最 常用 的 HTML 表单 元 素 是 什么 ? 你 一 定 会 说 是 input, 一 点 都 没 错 儿 ! 这 个 元 素 
之 所 以 常用 ， 是 因为 它 可 以 在 屏幕 上 显示 为 多 种 不 同 的 外 观 ， 并 具有 不 同 的 行为 。 
文本 框 、 复 选 框 、 单 选 按钮 等 的 背后 都 是 input 元 素 ， 区 别 在 于 它们 的 type 属性 。 
以 下 列 出 了 type 属性 部 分 可 能 的 值 。 











O text: 基本 的 单行 文本 框 。 

Q password: 文本 显示 为 掩 码 。 

口 checkbox: 复 选 框 。 

O radio: 单 选 按钮 。 

口 submit: 提交 表单 的 按钮 。 

Q time, date, search: HTMLS 文本 框 的 变 体 。 





要 想 知道 input 元 素 的 type 属性 的 所 有 值 ,可 以 参考 这 里 :https://developer.mozilla.org/ 
en-US/docs/HTML/Element/Input。 


实际 上 ， 以 上 几 种 类 型 都 是 前 面 表单 标记 中 用 到 的 ， 这 些 类 型 值 决定 了 相应 input 
元 素 的 外 观 和 行为 。 





有 一 个 文本 控件 不 是 input 元 素 的 变 体 ， 那 就 是 多 行文 本 区 textarea LR HIN, 
在 用 户 输入 之 前 一 直 显 示 的 占 位 符 文本 ， 是 通过 placeholder 属性 设 定 的 。 
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复 选 框 、 单 选 按钮 和 选项 列表 

这 三 种 表单 元 素 比 一 般 的 控件 /标注 组 合 要 复杂 一 些 。 

a 复 选 框 可 以 让 用 户 从 多 个 备 选项 中 选择 一 或 多 个 项 。 每 个 备 选项 都 是 非 排 他 型 的 ， 

即 勾 选 同一 组 中 的 其 他 项 ， 不 会 影响 已 经 选择 的 项 。 

a 单 选 按钮 限制 用 户 只 能 从 多 个 备 选项 中 选择 一 项 。 每 个 备 选 项 都 是 排他 型 的 ， 即 
勾 选 同一 组 中 的 男 一 项 ， 就 会 取消 对 前 一 项 的 选择 。 








要 特别 注意 一 下 ， 复 选 框 和 单 选 按钮 都 是 成 组 出 现 的 ， 分 组 的 方法 是 为 它们 设 定 
相同 的 name 属性 。 对 于 本 例 中 的 单 选 按钮 ， 它 们 共同 的 名 字 叫 radioset。 这 个 组 
中 的 每 个 单 选 按钮 由 其 value 属性 唯一 标识 。 在 本 例 中 ， 分 别 是 Choice 1, 

Choice 2， 等 等 。 假 设 用 户 选 择 了 第 一 个 按钮 ， 那 么 发 送 到 服务 器 的 名 / 值 对 ， 就 


是 radioset-Choice 1。 








O 选项 列表 (select 元 素 ) 会 创建 一 个 下 拉 列 表 ， 用 户 可 以 在 其 中 点 选 。 在 select 
元 素 中 ， 每 个 备 选 项 都 用 option 文本 元 素来 生成 。 


uU» 要 知道 HTML 中 的 所 有 表单 元 素 ， 可 以 参考 这 里 : http://reference.sitepoint.com/html/ 


elements-form。 


6.2.2 ”表单 标记 策略 


因为 HTML 标准 没有 规定 专门 包含 控件 及 其 标注 的 元 素 ， 所 以 我 就 用 块 级 section 
元 素来 充当 这 个 角色 。 这 样 既 方便 组 织 控件 ， 又 方便 为 行内 表单 控件 及 其 标注 设 定 
FEN. 

基本 的 标注 和 控件 


在 前 面 的 标记 中 , 我 把 每 个 标注 和 控件 都 放 到 了 一 个 section 元 素 中 , ib label 位 于 
控件 之 前 。 
«section» 

«label»..«/label» 

«input /» 


«p».«/p» «!-- 控件 使 用 说 明 --» 
«/section» 
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通过 把 每 一 对 标注 和 控件 都 放 到 块 级 section 元 素 中 ,它们 自然 就 在 页 面 上 垂直 堆 蔷 
起 来 了 。 而 且 ， 这 样 也 有 了 一 个 可 以 定位 它们 的 包含 元 素 。 





复 选 框 和 单 选 按钮 


单 选 按钮 和 复 选 框 是 由 很 多 标注 /控件 组 成 的 ， 所 以 我 把 它们 都 放 到 了 一 个 section 
元 素 中 (便于 为 标注 /控件 设 定 基本 的 CSS 样式 )。 然 后 ， 在 这 个 元 素 里 面 ， 再 把 每 
个 复 选 框 或 单 选 按钮 的 标注 /控件 分 别 放 到 各 自 的 section 元 素 中 。 





«section» 
«h4»Set Heading«/h4» 
<!-- 第 一 个 单 选 按钮 / 复 选 框 --> 
«section» 
«input /» 
«label»..«/label» 
«/section» 
<!-- 第 二 个 单 选 按钮 / 复 选 框 --> 
«section» 
«input /» 
«label»..«/label» 
«/section» 
«1-- 控件 使 用 说 明 --> 
€«p»..«/p» 
«/section» 


这 时 候 , 我 把 标注 放 到 了 控件 后 面 , 这 样 它 才 能 显示 在 控件 右 侧 。 虽然 每 个 控件 ( 复 
选 框 和 单 选 按钮 ) 都 有 一 个 对 应 的 标注 ， 但 不 能 将 它们 用 作 整 个 控件 组 的 标题 。 每 
个 label 元 素 只 能 用 于 标注 一 个 控件 。 为 此 , 我 就 用 一 个 h4 元 素来 作为 它们 的 标题 。 
如 前 所 述 ， 我 还 添加 了 一 个 p 元 素 ， 用 于 显示 控件 使 用 说 明 。HTML 未 来 的 版 本 中 
或 许 会 专门 规定 这 些 特定 用 途 的 标签 。 但 在 此 之 前 ， 到 底 选用 什么 标签 来 达到 目的 ， 
还 是 会 因 人 而 异 。 好 了 ， 该 看 一 看 实现 最 终 表 单 的 CSS 样式 了 。 





6.2.3 ” 设 定 表单 样式 


首先 ， 从 表单 的 整体 布局 开始 。 换 句 话 说， 就 是 先 设 定 form 和 两 个 fieldset 元 素 的 
样式 。 
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form.stylin formi { 
width:i4em; /* 表单 整体 宽度 
margin:20px auto; /* E em */ 
border:1px solid #bbb7ae; 
padding:.5em .5em .15em; 


} 
.stylin formi h3 ( /* 表单 主 标 题 */ 
margin:0; 


padding:O 0 .2em .2em; 
font-weight:600; 
color:ibbb7ae; 
} 
.stylin formi fieldset ( /* 包 含 控件 与 标注 */ 
margin:0; 
padding:O 0 .2em 0; 
width: 10026; 
border:0; 


) 


/* legend 元 素 的 位 置 不 同 寻常 ,所 以 我 把 它 的 文本 和 包含 在 一 个 块 级 span 中 , 转 而 为 span 


设 定 样式 */ 

.Stylin formi legend { 
width:100%; 
padding:.3em 0; 
background:ibbb7ae; /* 灰 色 条 */ 
} 

.Stylin formi legend span { /* 设 定 标题 文本 
display:block; 
font-size:1em; 
line-height:1.1em; 
padding: O O O .4em; 
font-weight:700; 
color:#fff; /* 灰 色 条 上 的 反 和 白文 本 */ 
} 


这 样 ， 表 单 就 变 成 了 如 图 6-15 所 示 。 


的 样式 */ 


如 图 6-15 所 示 , 通 过 为 form 设 定 内 边 距 , 它 所 包含 的 内 容 都 与 表单 边界 空 开 了 趾 离 。 
很 明显 ,我们 给 legend 添加 了 灰色 条 ， 相 应 地 把 文本 设 定 成 了 白色 。legend 元 素 默 





认 的 位 置 是 由 浏 Sii aid 的 一 种 未 加 说 明 的 机 i 





判 确定 的 ， 并 不 是 由 浏览 器 样式 表 设 


定 的 。 因 此 ,不 可 能 通过 CSS 来 精确 控制 它 的 位 置 。 解 决 这 个 问题 的 方法 ， 就 是 把 
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它 的 文本 包含 在 一 个 span 元 素 中 , 将 该 元 素 设 定 为 display:block, 然后 再 设 定 该 元 
素 的 位 置 。 接 下 来 ,我 们 从 宏观 到 微观 ， 再 看 看 怎么 给 控件 组 ( fieldset ) 中 的 控件 
和 标注 设 定 样式 。 


* indicates required field 
User Name * 

Please select a user name 
Password * 


Password must be 8 or more 
characters 


Description 





Date 9 


Select Any Number 





6-15 为 form 和 fieldset 元 素 设 定 了 样式 之 后 


.stylin formi section ( 
overflow:hidden; /* 强制 section 包含 表单 控件 及 标注 */ 
padding:.2em 0 .4em 0; 
border-bottom:8px solid #e7e5df; /* 根据 需要 在 每 个 section 间 增 加 间距 */ 
} 

.stylin formi section:last-child ( /* 每 组 最 后 一 个 section 没有 边框 */ 
border-bottom:Opx; 
j 

.stylin formi section label, /* 表单 控件 的 标注 */ 

.stylin formi section h4 ( /* h4 是 复 选 框 和 单 选 按 钮 组 的 标题 */ 
display:block; 
clear:both; 
margin:.3em .3em 0 0; /* 右 外 边 距 确保 标注 文本 在 碰 到 input 之 前 会 换行 */ 
padding-bottom: .1em; 
font-size: .8em; 
font-family:'Droid Sans'; 
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font-weight:400; 
line-height:1.1; 
} 
.stylin formi section label span, /* 星 号 表示 必 填 字段 */ 
.Stylin formi section h4 span { 
font-size:.75em; 
vertical-align:text-top; 
color:#f00; 
} 
.Stylin form1 section p.note ( /# 说 明星 号 是 必 填 字段 的 文本 #/ 
font-size:.7em; 
color:#f00; 


margin:0; 
padding:0 0 .3em 0; 
} 


.Stylin form1 section input, 
.Stylin formi section textarea, 
.stylin formi section select ( 
margin:.2em .5em .2em 0; 
padding:.2em .4em; /* 给 input 中 的 文本 添加 间距 */ 
color:#000; 
box-shadow:1px 1px 3px #ccc; 
font-size:.8em; 
/* 针对 Firefox - 没有 这 条 声明 会 在 textarea 上 使 用 Courier */ 
font-family:inherit; 
outline:none; /* 去 掉 默 认 蓝 色 聚焦 轮廓 线 #/ 
} 
/* 设 定 文本 字段 (XA, FA, UA, ARF) 的 样式 ， 并 加 圆 角 */ 
.Stylin form1 section input, 
.Stylin formi section textarea { 
width:12em; /* 设 定 字 段 宽度 */ 
border:1px solid #bbb7ae; 
border-radius:3px; /* 圆 角 边 框 */ 
} 
.stylin form1 section textarea { 
height:5em; /* textarea 的 高 度 */ 
margin-top:.3em; /* 与 上 面 label 的 间距 */ 
line-height:1.1; 
} 
.stylin formi section p ( /* 控 件 使 用 说 明 */ 
margin:.3em .75em 0; 
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clear:both; 
font-size:.7em; 
line-height:1.1; 
color:#000; 


} 


.Stylin formi section p.error { 
color:ffO00; /* 添加 error 类 ， 把 说 明文 字 设 定 为 红色 */ 


} 


* indicates required field 


User Name * 


Please select a user name 


Password * 


Password must be 8 or more characters 


Description 


Date 


Select Any Number 


Choice 1 





6-16 ”第 一 个 fieldset 中 的 控件 和 标注 都 被 应 用 了 样式 

如 图 6-16 所 示 , 我 把 所 有 控件 的 可 见 盒子 (类 型 为 text, date, textarea 和 select ) 
都 设 定 为 相同 宽度 , 为 说 明文 字 应 用 了 样式 , 并 给 每 个 section 元 素 添加 了 较 宽 的 边 
框 ， 让 它们 从 视觉 上 保持 适当 距离 。 





某 些 标注 后 面 的 星 号 表示 相应 字段 是 必 填 的 , 也 就 是 用 户 不 能 不 填 。 这 个 (用 Shift-8 ) 
输入 的 星 号 被 包含 在 span 元 素 中 ， 以 便 调 整 它 与 标注 文本 的 相对 位 置 ， 并 应 用 不 同 
颜色 。 注意 , 我 们 还 为 控件 使 用 说 明 段 落 设 定 了 一 条 p.error 规则 。 如 果 控 件 中 数据 
无 效 ， 这 个 类 就 会 被 添加 到 说 明 段 落 上 。 然 后， 说 明文 字 会 变 成 红色 ， 提 醒 用 户 必 
须 输 入 有 效 数据 才能 提交 表单 。 


V 
ZE 这 个 error 类 将 由 验证 表单 的 代码 添加 。 
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Af. 下面 该 轮 到 复 选 框 、 单 选 按钮 和 选项 列表 了 。 这 些 控件 全 都 位 于 第 二 个 控件 组 
H, MEI 6-16 底部 可 以 看 到 ， 它 们 的 标注 都 在 控件 下 方 ， 而 我 想 让 这 些 标注 与 控件 
并 排 显示 。 先 别 急 着 看 下 面 的 CSS 规则 ,建议 你 此 刻 翻 到 6.2.2 节 , 重 温 一 下 复 选 杠 
和 单 选 按钮 区 块 ( section ) 的 标记 结构 。 





.stylin formi section section ( /* 控件 /标注 的 内 包装 */ 
overflow:hidden; /* 强制 元 素 包 围 浮动 标注 */ 
margin:.2em 0 .3em .4em; 
padding:0 0 .1em 0; 
border-bottom:none; 


.stylin formi section section input ( /* 单 选 按 钮 或 复 选 框 */ 
float:left; 
clear:both; 
width:auto; /* 重 设 继承 的 宽度 */ 
margin:.1em 0 Oem .3em; /* 顶部 与 标注 对 齐 ， 左 侧 防 止 intput 溢出 */ 


.Stylin formi section section label { 
float:left; 
clear:none; /* 重 设 继承 的 值 */ 
width:15em; 
margin:.15em 0 O .6em; /* 在 相 邻 的 复 选 框 之 间 、 复 选 框 与 标注 之 间 增 加 间距 */ 
font-weight:normal; /* 重 设 继承 的 值 */ 
font-size:.7em; 
line-height:1.2; 

} 

.stylin form1 section select { 
margin-left:.4em; 
font-size:.85em; 

} 

.stylin formi section input[type-"submit"] ( /* 提 交 按 钮 */ 
width:auto; /* 履 盖 为 其 他 字段 设 定 的 宽度 */ 
margin:.4em .3em 0 0; 
font-size:1em; 
font-weight:800; 
color:#fff; 
background-color :#bbb7ae; 
cursor:pointer; /# 在 鼠标 位 于 按钮 之 上 时 ， 把 光标 变 成 小 手 形状 */ 
} 

.stylin formi > section:last-child ( /* 导 中 提交 按钮 */ 
text-align:center; 


} 
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每 一 组 单 选 按钮 和 复 选 框 的 标题 ， 看 起 来 很 像 表 单 第 一 个 控件 组 里 的 标注 。 但 实际 
上 ， 它 们 是 h4 元 素 一 一 我 们 只 能 用 label 来 关联 控件 。 正 因为 如 此 ， 要 把 同样 的 样 
式 设 定 给 h4 很 简单 ,把 为 表单 第 一 个 控件 组 中 的 label 设 定 样式 的 选择 符 中 的 label 
替换 成 h4 即 可 。 然 后 ， 给 这 里 每 个 复 选 框 和 单 选 按钮 的 小 标注 另外 写 一 种 样式 。 为 
了 让 选项 列表 与 其 他 元 素 对 齐 ， 我 们 也 为 它 设 定 了 相应 的 样式 ， 通 过 减 小 其 文本 大 
小 也 把 它 缩小 了 一 点 。 至 于 提交 按钮 ， 它 的 宽度 不 再 继承 前 面 设 定 给 其 他 input 的 
规则 , 并 且 在 表单 底部 居中 。 明确 告诉 用 户 , 这 是 表单 的 最 后 一 个 步骤 , 参见 图 6-17。 


ini name 属性 设 定 同一 个 名 字 的 情况 下 , 复 选 框 和 单 选 按钮 的 行为 就 像 一 个 组 一 样 。 
交 表 单 时 ,它们 的 name 值 与 value 值 , 将 分 别 作 为 “名 = 值 ”对 中 的 “名 ”和 “ 值 ”。 





Select Any Number 
O Choice 1 
(VÍ Choice 2 is pre-checked 


口 Choice 3 一 add as many as you 
need! 


You must choose one or more 


Select Only One 


(9) Choice 1 is pre-selected and 
shows the text wraps nicely if it 
goes to multiple lines. 


( Choice 2 
O Choice 3 


Select Your Choice 
None $4 





图 6-17 ” 复 选 框 、 单 选 按钮 和 提交 按钮 已 经 各 就 各 位 


到 现在 为 止 ,“ 标 注 在 上 ”版 的 表单 已 经 完成 了 。 接 下 来 ,我 会 再 向 大 家 展示 一 些 样 
式 ， 它 们 能 让 表单 的 标注 显示 在 控件 的 左 侧 。 使 用 这 个 “标注 在 左 ” 版 的 样式 也 很 
简单 ， 只 要 给 form 元 素 加 上 labels left 类 即 可 。 
form.stylin formi.labels left { 

width:22em; /# 加 宽 表 单 ， 为 标注 腾 出 地 方 #/ 

} 
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form.stylin formi.labels left label, 
form.stylin formi.labels left h4 { 
float:left; /# 把 标注 浮动 到 控件 左 侧 */ 
width:8em; 
} 
form.stylin formi.labels left p { 
margin:0 0 0 9.35em; /* 缩 进 控件 说 明 ， 以 便 它 位 于 控件 正 下 方 */ 
padding:.3em 0 0 0; 
clear:both; /* 确 保 说 明 不 会 跟着 浮动 的 标注 和 控件 走 */ 


} 

form.stylin formi.labels left p.note ( /* 必 填 字段 文本 下 方 的 间距 */ 
margin:0 0 .2em 0; 
} 

/* 每 个 单 选 按 钮 或 复 选 框 及 其 标注 的 内 包装 */ 

form.stylin form1.labels left section section { 
width:10em; 
margin-left:6.5em; 
padding-top:0; 
} 

form.stylin form1.labels left section section input { 
width:1.25em; /# 单 选 按 钮 或 复 选 框 的 宽度 */ 
margin-left:0; 
} 

.Stylin formi.labels left section input, 

.stylin formi.labels left section textarea, 

.stylin formi.labels left section select { 
float:left; /# 让 控件 成 为 第 二 栏 #/ 
width:12em; 
} 

.stylin_form1.labels_left section select ( /* 缩 进 选 项 列表 */ 
margin-left:.2em; 
} 

/* 防 止 提 交 表 单 按钮 继承 浮动 的 行为 */ 

.Stylin formi.labels left > section input[type-submit] { 
float:none; 


} 


图 6-18 展示 了 这 两 个 版 本 的 最 终 效 果 , 其 中 ,“ 标 注 在 左 ” 版 为 控件 使 用 说 明 元 素 ( p ) 
应 用 了 error 类 。 
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* indicates required field 
User Name * 


Please select a user name 


Password * * indicates recuired field 
User Name * 
Password must be 8 or more characters Please select a user name 
Description Password * 


Password must be 8 or more characters 


Description 
Date 
日 
Date 日 
SelectAnyNumber Select Any 口 Choice 1 
口 Choice 1 Number Choice 2 is pre- 
(VÍ Choice 2 is pre-checked m checked 
e [1 i —- 
O Choice 3 一 add as many as you = Bee a s3 
Ta need! 
You must choose one or more 
Select OnlyOne @ Choice 1 is pre- 
Select Only One selected and 
(9) Choice 1 is pre-selected and shows the text 
shows the text wraps nicely if it wraps nicely if it 
goes to multiple lines. goes to multiple 
^ lines. 
O Choice 2 CS 
ice 
O Choice 3 b: 
"T O Choice 3 
Select Your | None [m 
Choice 





图 6-18 ”表单 的 两 个 版 本 ， 左 边 标 注 在 上 ， 右 边 标注 在 左 且 突出 显示 了 控件 使 用 说 明 


通过 前 面 这 个 例子 涉及 的 那么 多 HTML 和 CSS 代码 , 你 一 定 深 深 体会 到 了 为 表单 添 
加 样式 多 么 复杂 ， 多 人 么 耗 时 间 。 正 因为 如 此 ， 我 对 这 里 原型 式 表 单 的 标记 进行 了 精 
心 设计 ， 而 且 写 了 很 多 注释 ， 以 方便 你 轻松 地 把 它 作为 你 自己 设计 表单 的 起 点 。 直 
接 复制 粘贴 HTML 代码 也 好 ， 模 仿 其 结构 再 添加 你 需要 的 各 种 控件 也 黑 ， 别 忘 了 把 
这 个 表单 CSS 链接 到 页 面 中 。 然后 , 给 你 的 form 元 素 加 上 stylin formi 类 , 你 的 表 
单一 下 子 就 能 变 成 现在 这 个 样子 。 以 此 为 起 点 ， 进 行 各 种 改进 和 增强 ， 就 会 非常 容 
易 了 。 我 自己 就 是 这 样 做 的 ， 这 样 每 次 都 能 节省 好 几 个 钟头 的 时 间 。 下 面 ， 我 们 谈 
一 谈 如 何 设计 搜索 表单 吧 。 


-217 - 


第 6 章 界面 组 件 


6.2.4 设计 搜索 表单 
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几乎 每 个 站 点 都 会 提供 一 种 搜索 机 制 。 我 猜 ， 慌 怕 你 很 难 把 一 个 搜索 框 当 成 一 个 表 
单 ， 但 它 的 确 是 一 一 一 个 字段 的 表单 。 搜 索 表 单 提 供 了 简单 的 搜索 功能 ， 它 随时 共 
候 在 标题 栏 的 右 侧 ， 那 儿 几 乎 是 它 的 专属 位 置 。 苹 果 网 站 上 那个 小 巧 、 低 调 的 搜索 
框 ， 在 用 户 点 击 它 的 时 候 会 扩展 开 来 ， 为 输入 关键 词 提供 更 多 空间 。 它 旁边 甚至 连 
一 个 按钮 都 没有 一 一 用 户 都 知道 点 击 、 输 入 ， 然 后 再 按 Return 或 回 车 键 。 这 种 搜索 
表单 的 form 元 素 中 只 需要 包含 一 个 label 和 一 个 input。 在 下 面 的 例子 中 ， 我 会 把 
这 个 表单 放 在 一 个 header 标签 中 ， 以 便 得 到 一 个 包含 搜索 功能 的 页 眉 。 








<header> 
<form class="stylin form search1" action="#" method="post"> 
«label for-"search"»search«/label» 
«input type-"search" id-"search" name-"search" 
placeholder-"search" /» 
«/form» 
«/header» 


背 这 个 例子 ， 我 们 正好 可 以 讲 一 讲 CSS3 的 过 渡 功 能 。 过 渡 可 以 基于 某 个 CSS 属性 
实现 动画 效果 。 在 这 个 例子 中 ， 我 们 要 利用 它 实现 文本 框 动态 变 宽 的 效果 。 对 应 的 
CSS 如 下 : 


* {margin:0; padding:0;} 
header ( /* 在 这 个 例子 中 代表 页 届 */ 
font-family:helvetica, arial, sans-serif; 
display:block; 
overflow:hidden; 
width: 500px; 
margin:30px; 
border-radius:6px; 
background-color:#ddd; 
} 
form.stylin form searchi ( /*6&& label 和 input 的 容器 */ 
float:right; 
width: 200px; 
margin:5px; padding:5px; 
} 
form.stylin form search1 input { 
float:right; 


6.2 表单 


width:70px; 
padding:2px O 3px 5px; 
outline:none; /* 去 掉 默 认 的 突显 轮廓 线 */ 
font-size:.8em; border-color:#eee #ccc #ccc #eee; 
/* 针 对 其 他 浏览 器 的 厂商 前 级 */ 
border-radius:10px; -webkit-transition:2s width; 
} 
form.stylin form searchi input:focus {width:200px;} 
form.stylin form searchi label (display:none;] /# 标 注 是 必要 的 ， 但 不 用 显示 出 来 */ 


CSS3 transiti 





图 6-19 点击 这 个 小 巧 的 搜索 框 ， 它 会 自动 加 宽 ， 占 位 符 文 本 也 会 被 输入 的 关键 字 取 代 


这 里 的 form 元 素 是 “有 宽度 的 ”, 而 且 是 向 右 浮动 的 。 表 单 内 部 的 input 也 是 向 右 浮 
动 ， 如 图 6-19 上 面 所 示 。 虽 然 label 元 素 没有 显示 出 来 ， 但 它 是 必须 要 加 的 。 文 本 
框 中 的 文本 由 placeholder 属性 生成 , 只 要 用 户 一 开始 输入 , 这 些 占 位 符 文本 就 会 自 
动 隐藏 ， 如 图 6-19 下 面 所 示 。 








运用 CSS3 过 渡 


在 前 面 的 CSS 中 , input 规则 将 该 字段 宽度 设 定 为 70 像素, input:focus 规则 将 该 字 
段 宽度 修改 成 了 200 像素 。 这 意味 着 ， 在 用 户 单 击 搜索 框 让 它 获 得 键盘 焦点 之 后 ， 

字段 宽度 会 改变 。 不 过 ,由 于 现在 有 了 transition:2s width, 字段 不 会 突然 扩 
展 到 新 宽度 ， 而 是 会 用 两 秒 钟 时 间 平 请 地 伸展 到 200 像素 。 必 须 注意 ，CSS3 的 过 渡 
声明 要 放 在 设 定 初始 状态 的 规则 中 。 而 且 ，transition 属性 需要 使 用 带 厂 商 前 级 的 
形式 一 这 里 只 示范 了 带 有 WebKit ( Safari/Chrome ) 前 级 的 属性 。 下 一 章 ， 我 们 还 
会 在 一 个 完整 的 页 面 中 用 到 这 个 搜索 表单 。 另 外 ， 下载 的 本 书 源 代码 中 还 包含 它 的 
几 个 不 同 版 本 。 要 了 解 有 关 使 用 CSS 过 渡 的 更 多 信息 ， 请 参考 附注 “CSS3 过 渡 ”。 
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CSS3 过 渡 


CSS3 过 渡 可 以 让 CSS 属性 产生 动画 效果 。 平 常 被 某 些 事件 触发 时 变化 很 突然 的 样式 ， 比 如 妃 
标 悬 停 时 改变 链接 颜色 ,使 用 过 渡 后 会 在 指定 的 时 间 段 内 逐渐 变化 。 第 一 条 CSS 规则 设 定 属性 
的 初始 状态 和 过 渡 参 数 。 第 二 条 CSS 规则 设 定 事件 发 生 时 属性 的 目标 状态 。 


在 下 面 这 个 例子 中 , 用 户 单 击 表单 输入 字段 后 ， 输 入 框 的 边框 颜色 会 从 黑色 变化 为 绿色 ,过 渡 
周期 为 两 秒 钟 。 


input {border-color:black; transition:border-color 2s;} 
input:focus {border-color:green;} 
请 注意 ,使 用 transition 属性 时 要 针对 所 有 浏览 器 添加 厂商 前 级 。 


通常 , 过 渡 动 画 是 由 用 户 鼠 标 悬 停 时 的 :hover 伪 类 规则 和 表单 元 素 获 得 焦点 时 的 :focus 伪 类 
规则 触发 的 。 除 此 之 外 , 还 可 以 在 一 个 带 类 名 选择 符 的 规则 中 设 定 新 状态 , 然后 通过 JavaScript 
(或 jQuery, MooTools 等 JavaScript Æ) 为 元 素 添加 这 个 类 名 来 触发 过 渡 ， 添 加 类 名 的 时 机 可 
以 是 鼠标 点 击 或 其 他 事件 发 生 时 。 


有 五 个 过 渡 属 性 : 


口 transition-property， 过 渡 的 CSS 属性 名 ， 比 如 color, width; 

O transition-duration， 过 渡 的 持续 时 间 ， 以 秒 或 毫秒 设 定 ， 比 如 2s、500ms; 

O transition-timing-function， 过 渡 的 调 速 下 数 ， 决 定 动画 效果 是 否 平滑 ， 是 先 慢 后 快 还 
是 先 快 后 慢 ， 比 如 ease-in、ease-out、ease-in-out EX linear (默认 值 ) ; 

O transition-delay， 过 湾 开 始 前 的 延迟 时 间 ， 以 秒 或 毫秒 设 定 ， 比 如 1s. 200ms; 

口 transition， 过 渡 的 简写 属性 ,例如 transition:color 2s ease-in 1ms;。 





很 多 (并非 全 部 ) CSS 属性 都 可 以 通过 transition 属性 来 实现 动画 效果 。 至 于 哪些 属性 可 以 
实现 动画 效果 , 可 以 参考 链接 http://www.w3.org/TR/css3-transitions/&animatable-properties , 
这 个 页 面 是 W3C 对 CSS3 Transitions Module 的 官方 陈述 。 另 外 ， 下 面 这 篇 介绍 CSS3 过 渡 的 文 
章 也 非常 值得 一 看 : http://www.css3.info/preview/css3-transitionso 


6.3 ”弹出 层 


弹出 层 ( 也 叫 提示 条 ) 指 的 是 在 鼠标 悬 停 于 某 个 元 素 之 上 时 显示 的 一 个 界面 组 件 。 
在 页 面 空间 有 限 的 情况 下 ， 弹 出 层 是 为 用 户 提供 更 多 信息 的 一 种 有 效 手段 。 而 且 ， 
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在 用 户 把 鼠标 移动 到 关注 的 元 素 之 上 时 ， 显 示 一 个 弹出 层 也 是 件 自然 而 然 的 事 儿 。 
乍 一 听 ， 弹 出 层 不 是 个 太 复杂 的 东西 。 但 是 ， 一 会 儿 你 就 知道 我 为 什么 把 它 放 在 本 
章 最 后 才 讲 了 。 围 绕 创建 弹出 层 ， 我 会 跟 大 家 讲 两 个 CSS 中 非常 强大 ,但 又 没 多 少 
人 真正 理解 的 特性 : z-index 属性 和 动态 生成 HTML 元素。 我 会 在 接 下 来 的 练习 中 
用 到 三 张 图 片 ， 每 张 图 片 都 配 一 个 图 题 。 以 下 就 是 练习 的 HTML 标记 ， 其 中 使 用 了 
HTMLS 新 增 的 figure 和 figcaption 元 素 。 








«figure» 
«img src-"images/pink heels.jpg" alt-"pink heels" /> 
«figcaption» 
«h3»Pink Platforms«/h3» 
«a href="#">More info«/a» 
«/figcaption» 
«/figure» 
«figure class-"click me"» 
«img src-"images/leopard heels.jpg" alt-"leopard heels" /> 
«figcaption» 
«h3»Leopard Platforms«/h3» 
«a href="#">More info«/a» 
«/figcaption» 
«/figure» 
«figure class-"click me"> 
«img src-"images/red heels.jpg" alt-"red heels" /> 
«figcaption» 
«h3»Red Platforms«/h3» 
«a href="#">More info«/a» 
«/figcaption» 
«/figure» 


大 家 注意 ， 如 果 要 使 用 figcaption， 必 须 确 保 它 在 figure 中 是 唯一 的 。 而 且 ， 它 要 
么 是 第 一 个 子 元 素 ， 要 么 是 最 后 一 个 子 元 素 。 首 先 ， 我 们 设 定 figure 元 素 的 样式 ， 
让 它 在 视觉 上 成 为 一 个 包围 图 片 的 盒子 。 


figure { 
width:144px; /* 图 片 金子 宽度 */ 
height:153px; /# 图 片 金子 高 度 #/ 
margin:20px 20px; /# 图 片 人 金子 间距 */ 
border:1px solid #666; /# 图 片 边框 #/ 
position:relative; /* 为 弹出 层 提供 定位 上 下 文 */ 
float:left; /* 让 图 片 并 排 显示 */ 





} 
img (display:block;) /* 去 掉 图 片 下 方 的 基线 空白 */ 
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图 6-20 ”为 图 片 添 加 了 边框 ， 并 且 让 它们 并 排 显示 


如 图 6-20 所 示 ，figure 元 素 的 边框 之 内 恰好 能 容纳 图 片 ， 而 有 旦 浮动 也 让 它们 并 排 显 
示 在 一 行 。figcaption 元 素 目 前 就 显示 在 它 默 认 的 位 置 ， 但 下 一 步 它 就 会 变 成 我 们 
的 弹出 层 。 为 什么 把 图 片 设 定 为 display:block 呢 ? 因为 图 片 默 认 是 行内 元 素 , 行内 
元 素 的 定位 原则 是 与 文本 基线 对 齐 ， 而 不 是 与 它们 容器 的 底 边 对 齐 。 在 把 它们 放 在 
块 级 元 素 内 部 时 ( 像 这 里 一 样 )， 把 图 片 转换 为 块 级 元 素 可 以 解决 这 个 问题 。 另 外 ， 
这 里 还 把 figure 元 素 设 定 为 相对 定位 ， 这 样 随后 就 可 以 把 它 作为 定位 上 下 文 来 定位 
figcaption 了， 下面 就 是 相应 的 样式 。 


figcaption { 
display:none; /* 隐 藏 弹出 层 */ 
position:absolute; /* 相 对 于 容器 (图 片 ) 定位 */ 
left:74%; top:i4px; /* 把 弹出 层 放 到 图 片 右 侧 */ 
width:130px; /* 弹 出 层 宽 度 */ 
padding:10px; /* 弹 出 层 内 边 距 */ 
background:#f2eaea; 
border:3px solid red; 
border-radius:6px; 
} 
figure:hover figcaption {display:block;} /* 筷 标 悬 停 在 图 片上 时 显示 弹出 层 */ 
figcaption h3 ( /* 弹 出 层 的 内 容 */ 
font-size:14px; 
color:#666; 
margin-bottom:6px; 
} 
figcaption a ( /* 弹 出 层 的 内 容 */ 
display:block; 


6.3 ”弹出 层 


text-decoration:none; 
font-size:12px; 
color:#000; 


} 

这 里 我 们 又 用 到 了 实现 下 拉 菜 单 时 的 技术 ， 即 先 隐 藏 弹出 层 ， 然 后 在 鼠标 悬 停 时 再 
显示 它 。 为 了 把 弹出 层 定位 在 图 片 盒子 的 右 侧 ， 我 们 把 它 的 left 属性 设 定 为 74%。 
或 许 有 人 认为 在 这 里 应 该 使 用 right 属性 ， 但 那样 就 是 设 定 图 片 盒子 右边 与 弹出 层 
右边 的 相对 位 置 了 。 
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图 6-21 鼠标 移动 图 片上 时 ， 会 在 弹出 层 中 显示 图 题 。 可 是 ， 前 两 个 截图 的 弹出 层 被 右边 的 图 片 
给 挡住 了 


6.3.1 S E XHHlz-index 


从 图 6-21 中 的 前 两 个 截图 来 看 , 前 两 张 图 片 的 弹出 层 被 右边 的 图 片 给 挡住 了 一 部 分 。 
这 是 由 于 figure 元 素 的 堆 徐 次 序 导致 的 。 在 一 个 包含 多 个 同 埋 元素 的 容器 内 ， 就 像 
这 里 body 元 素 的 三 个 figure 子 元 素 一 样 ， 这 些 同 辈 元 素 都 会 构造 一 个 堆 登 上 下 文 。 
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在 这 个 上 下 文中 ， 它 们 的 子 元 素 会 上 下 堆 受 起 来 。 假 如 通过 定位 让 前 两 个 figure 元 
素 重 个 ， 那 么 你 会 发 现 第 一 个 figure 元 素 ， 以 及 它 的 堆 合 上 下 文中 的 所 有 子 元 素 ， 
都 将 位 于 第 二 个 figure 元 素 的 后 面 。 第 一 个 插图 的 弹出 层 属于 第 一 个 figure 元 素 的 
MES ERA, BULUESGAZER T figure 元 素 的 堆 琶 上 下 文中 所 有 元 素 的 后 面 。 





CSS 中 有 一 个 z-index 属性 , 用 于 控制 元 素 的 在 推倒 上 下 文中 的 次 序 。 换 句 话 说 , 38 
过 它 可 以 改变 元 素 堆 琶 时 的 默认 次 序 。z-index 值 较 大 的 元 素 ， 在 堆 琶 层次 中 位 于 
z-index 值 较 小 的 元 素 上 方 。z-index 属性 的 值 可 以 是 0 到 任意 大 的 数值 ; 负 值 也 可 
以 ,但 在 基 些 浏览 器 中 并 不 可 靠 。 默 认 情 况 下 ,所 有 堆 徐 元 素 的 z-index 的 值 为 auto， 
相当 于 0。 


不 过 ，z-index 只 对 那些 position 值 为 static 之 外 的 元 素 有 效 。 换 句 话 说， 涉及 的 
两 个 元 素 必须 是 absolute, relative 或 fixed 定位 才 行 。 在 我 们 的 例子 中 ， 弹 出 层 
已 经 是 绝对 定位 了 ， 其 位 置 相对 于 相对 定位 的 figure 元 素 。 所 以 ， 只 要 给 弹出 层 应 
用 大 于 0 的 z-index 值 ， 就 可 以 让 它们 在 堆 钱 中 处 于 最 高 屋 。 这 里 ， 我 们 把 z-index 
设 定 为 0。 


figure:hover figcaption (display:block; z-index:2;) /* 把 弹出 层 放 到 最 前 面 */ 
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图 6-22 ”在 给 弹出 层 设 定 了 较 大 的 z-index 属性 后 ， 它 们 就 能 显示 在 所 有 图 片 之 前 了 


这 个 例子 告诉 我 们 , 应 该 只 给 悬 停 状 态 设 定 z-index ETE, 而 不 要 试图 通过 设 定 个 别 
元 素 的 z-index KMRL TSE., RARR “BFE z-index”， 你 就 能 放 
心地 摆 放 图 片 , 而 且 知 道 在 触发 弹出 层 时 , 它 一 定 会 显示 在 页 面 的 最 前 面 , 如 图 6-22 
所 示 。 

















6.3 ”弹出 层 


6.3.2 用 CSS 创 造 三 角形 


现在 ,我 在 考虑 怎么 让 弹出 层 和 图 片 的 关系 更 加 明确 。 嗯 ， 可 以 给 弹出 层 左 边 添 加 
一 个 三 角 箭头 ， 让 它 指向 图 片 。 这 就 涉及 利用 盒子 三 角形 对 接 的 边框 来 创建 三 角形 
了 。 下 面 我 用 一 个 div 来 演示 这 个 技术 。 


4 4 


6-23 ”使 用 宽 边 框 创建 三 角形 
以 下 是 图 6-23 所 示 效 果 的 代码 。 


div ( 

border:12px solid; 

border-color:transparent red transparent transparent; 

height:0px; 

width:Opx; 
} 
如 图 6-23 所 示 ， 通 过 加 宽 盒 子 的 边框 ， 将 盒子 的 宽 和 高 都 设 定 为 0， 同 时 将 其 他 三 
个 边框 设 定 为 transparent， 就 可 以 用 CSS 造 出 一 个 三 角形 。 现 在 ， 我 把 这 个 技术 
与 ::before 伪 元 素 结合 起 来 。 大 家 知道 ，: :before 和 ::after 这 两 个 伪 元 素 是 用 于 添 
加 文本 或 图 标 等 少量 内 容 的 。 不 过 ， 完 全 可 以 为 它们 生成 的 内 容 设 定 任何 样式 ， 就 
像 给 标记 中 其 他 元 素 设 定 样式 一 样 。 在 这 个 例子 中 ， 就 是 要 把 伪 元 素 生成 内 容 的 盒 
F, M Css 制作 成 一 个 三 角形 ， 并 把 它 放 到 弹出 层 的 左边 。 





figcaption::after ( /# 红 色 三 角形 的 盒子 */ 
content:""; /# 需 要 有 内 容 ， 这 里 是 一 个 空 字符 事 #/ 
position:absolute; /# 相 对 于 弹出 层 定 位 #/ 
border:12px solid; 
border-color:transparent red transparent transparent; 
right:10096; top:i7px; /# 相 对 于 金子 边框 定位 三 角形 #/ 
height:Opx; width:Opx; /* 收 缩 边框 创造 三 角形 */ 
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图 6-24 一 个 小 三 角形 ， 就 从 视觉 上 把 弹出 层 和 相关 图 片 联系 起 来 了 


好 了 ,代码 生成 的 三 角形 已 经 被 绝对 定位 到 了 弹出 层 左 侧 ， 而 弹出 层 本 身 又 相对 于 
图 片 定 位 ， 如 图 6-24 所 示 。 这 么 20 来 行 CSS， 就 能 显示 无 数 个 图 片 的 弹出 层 ! 谁 
说 编程 没有 创造 性 来 着 ”要 注意 的 是 ，: :before 伪 元 素 的 content 属性 中 必须 有 点 
内 容 ， 否 则 就 不 能 显示 生成 的 元 素 。 因 为 我 们 并 不 真 需要 什么 内 容 ， 所 以 就 用 一 对 
双 引 号 指定 了 一 个 空 字符 串 给 它 。 这 个 练习 好 玩 吧 ? 肯定 比 表 单 好 玩 多 了 , 是 不 是 ? 





小 结 


本 章 ， 我 教 给 了 大 家 一 些 为 流行 的 Web 界面 组 件 应 用 样式 的 技巧 ， 这 些 组 件 包 括 菜 
单 、 表 单 和 弹出 层 。 这 一 音 所 有 例子 的 源 文 件 都 可 以 下 载 到 ， 而 且 它们 的 代码 改 一 
改 就 可 以 用 在 你 的 项 目 中 。 不 过 ， 别 忘 了 : 没有 什么 比 徒手 从 零 写 出 这 些 组 件 更 能 
锻炼 一 个 人 的 CSS 技能 。 通 过 实际 操练 ， 你 才能 深刻 理解 基本 概念 ， 真 正 搞 明白 显 
示 、 定 位 、 背 景 ， 以 及 其 他 常用 CSS 特性 到 底 是 怎么 回 事 。 闲 话 少 说 ， 我 们 还 是 快 
IMANE, FE, 我 们 就 综合 运用 前 一 章 讲 过 的 布局 技术 和 这 一 章 的 界面 组 件 ， 

来 制作 一 个 完整 的 网 页 。 


7.1 


CSS3 实战 





这 一 章 我 们 要 写 一 个 完整 的 网 页 啦 ! 这 个 网 页 要 用 到 第 5 章 介绍 的 页 面 布局 技术 ， 
还 有 第 6 章 讲解 的 界面 组 件 设计 技术 .不仅 如 此 ,我 们 还 会 展示 很 多 CSS3 的 新 属性 ， 
涉及 圆 角 、 文 字 阴 影 、 盒 阴影、 过 滤 和 变换 。 这 些 CSS3 样式 ,可 以 为 页 面 的 整体 设 
计 增 添 专业 气息 。 




















还 是 说 实话 吧 ， 本 章 这 个 网 页 其 实 就 是 我 在 写 这 本 书 的 时 候 写 的 一 个 页 面 ， 也 就 是 
本 书 新 版 网 站 中 的 一 个 页 面 。 跟 以 前 一 样 ， 我 要 用 这 个 例子 来 展示 对 大 家 自己 写 项 
目 非 常 有 用 的 新 技术 ， 同 时 也 揭示 那些 你 不 小 心 就 可 能 掉 进 去 的 陷阱 。 














我 想 先 给 大 家 讲 二 讲 怎么 规划 页 面 的 整体 框架 ， 之 后 再 带 大 家 一 步 一 步 地 为 页 面 每 
个 区 域 设 定 CSS 样式 。 相 信 在 学 习 完 本 章 后 ， 你 肯定 能 掌握 设计 编写 一 个 完整 的 网 
页 所 需 的 技术 ， 并 胜任 编写 自己 新 网 页 的 工作 。 

















规划 页 面 结构 


就 算 写 个 再 简单 不 过 的 页 面 ， 悉 怕 都 得 敲 出 几 百 行 HTML 和 CSS。 所 以 ， 事 先 规 划 
一 下 页 面 结构 是 非常 必要 的 。 记 住 两 条 : 代码 结构 要 符合 逻辑 ， 规 划 组 织 要 考虑 层 
次 。 只 有 这 样 ， 才 能 确保 CSS 与 HTML 标记 前 后 照应 、 协 同一 致 。 后 面 例子 中 的 代 
码 就 是 遵循 上 述 规则 组 织 的 ， 我 想 这 应 该 是 编写 网 页 的 最 佳 实践 。 虽 然 这 种 做 法 需 
要 循规蹈矩 ， 但 它 的 回报 也 是 巨大 的 。 这 样 一 来 ,不 仅 能 方便 地 找到 与 任何 标记 相 
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KRAY CSS， 更 能 避免 样式 与 标记 混乱 造成 的 困惑 和 时 间 浪 费 。 最 重要 的 ， 这 样 做 不 
仅 你 自己 将 来 容易 理解 ， 而 且 拿 给 别人 去 改 的 时 候 ， 别 人 也 一 样 能 很 快 看 懂 。 


图 7-1 是 本 章 结束 时 要 完成 的 页 面 。 
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图 7-1 本 章 要 完成 的 页 面 布局 


HTML 结 构 
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着 手写 HTML 的 时 候 ,怎么 才能 把 画 好 的 设计 图 转换 成 恰当 的 HTML 元 素 是 个 挑战 。 
别 急 ， 我 有 一 个 好 办 法 。 一 般 来 说 ， 这 时 候 你 应 该 有 一 张 用 Photoshop 或 Fireworks 
做 的 设计 图 ， 至 少 也 是 用 铅笔 在 纸 上 画 出 的 页 面 框架 图 。 有 一 张 图 ， 才 好 跟 客 户 沟 
通 ， 然 后 再 调整 ， 保 证 设计 的 风格 还 有 内 容 的 组 织 能 够 满足 项 目 需要 。 设 计 图 确定 
之 后 ， 就 要 考虑 编写 页 面 代 码 了 。 此 时 ， 第 一 步 应 该 先 在 设计 图 上 夯 一 些 半 透明 的 
矩形， 分 别 代表 主要 的 HTML 结构 。 


HTML 不 是 由 矩形 的 元 素 构 成 的 嘛 ， 所 以 一 上 来 就 应 该 想 ， 怎 么 把 页 面 布局 分 成 尽 
可 能 大 的 矩形 区 块 。 据 此 ， 来 确定 页 面 标记 结构 中 的 顶级 元 素 。 然 后 ， 再 把 每 个 大 
区 块 进 一 步 划分 成 更 小 的 区 块 ， 分 别 对 应 为 结构 中 的 子 元 素 。 参 见 图 7-2， 这 是 我 在 
本 章 页 面 设计 图 上 划分 区 块 的 结 


7.1 规划 页 面 结构 


div#wrapper 
header 
sectionsttitle nav.menu form.search 
L- De Bos ang Zooks or Charles Wyke->min) LB d 


sectionsifeature ar 
secionteaue aga article#blog_leadoff1 r aside 
= 











section#book_area 


图 7-2 ”通过 观察 页 面 中 的 矩形 区 域 ， 可 以 把 页 面 标记 分 成 三 级 


从 图 7-2 可 以 看 出 ,页面 最 外 层 的 粗 框 是 一 个 外 包装 (divëwrapper )， 有 了 它 就 可 以 
轻易 地 设 定 布局 宽度 ， 并 且 让 布局 在 浏览 器 窗口 内 居中 。 外 包装 内 有 4 个 与 布局 同 
宽 的 矩形 ， 它 们 的 框 稍 细 一 些 ,， 算 是 布局 中 的 顶级 HTML 元素。 这 时 候 ， 最 好 想 一 
想 给 这 些 元 素 添加 什么 类 和 ID。 不 过 ，header 和 footer 元 素 是 不 需要 类 和 ID 的 ， 
因为 它们 在 整个 页 面 中 都 仅 出 现 了 一 次 。 主 要 是 中 间 两 个 section 元 素 的 矩形 区 块 ， 
需要 用 不 同 的 ID 来 区 分 ， 我 们 就 用 feature area 和 book area. 











有 读者 可 能 奇怪 ， 为 什么 页 眉 中 的 导航 元 素 会 盖 在 页 面 标题 和 搜索 表单 上 头 ” 因为 
我 已 经 决定 让 页 面 标题 和 搜索 区 域 采用 绝对 定位 了 。 这 样 ， 导 航 元 素 就 会 忽略 它们 ， 
从 而 填 满 整个 页 由。 本 章 后 面 你 就 会 看 到 ， 这 样 也 方便 我 把 它 包含 的 菜单 设 定 为 在 
页 面 上 居中 。 


然后 第 二 级 , 也 就 是 图 7-2 中 再 细 一 点 的 那些 矩形 框 。 在 每 个 顶级 元 素 中 , 需要 用 一 
个 最 大 的 子 元 素来 组 织 内 容 。 


对 header 而 言 ， 其 中 内 容 可 以 分 三 部 分 : 页 面 标题 在 左 侧 ， 导 航 菜 单 在 中 间 ， 搜 索 
表单 在 右 侧 。 在 feature area 中 ， 左 边 是 博客 正文 的 前 几 段 ， 右 边 是 一 个 aside 元 
素 ， 包 含 登 录 表 单 和 博文 链接 。 这 个 aside 区 域 在 下 一 步 还 要 细 分 。 
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FE FAY book area 需要 4 个 容器 ， 因 为 要 放 4 本 书 。 最 底下 的 footer 包含 一 点 文 
本 和 一 个 结构 化 的 nav 元 素 。 


接 下 来 是 第 三 级 。 先 说 feature area aside 吧 ， 要 把 它 分 成 两 个 独立 的 区 块 ， 一 个 
表单 和 一 组 链接 。 而 在 book area article F, 每 张 图片 也 分 别 用 一 个 元 素 包 装 起 来 ， 
好 为 每 本 书 的 弹出 层 提 供 定 位 上 下 文 。 刚 才 说 的 这 几 个 元 素 构成 了 结构 化 标记 的 第 
三 级 。 它 们 的 方 框 在 图 7-2 中 比 第 二 级 的 方 框 要 深 一 点 。 














虽然 实际 写 起 网 页 来 ， 可 能 还 要 额外 加 一 些 元 素 , 但 页 面 结构 规划 到 这 种 程度 已 经 
差不多 了 。 下 面 就 是 根据 以 上 分 析 ， 初 步 写 出 的 一 个 标记 结构 。 


«div id-"wrapper"» 


«header»«!-- 一 级 --» 
«section id-"title"»«!-- 二 级 --» 
<!-- hi 和 h2 --» 
</section> 
«nav»«l-- 二 级 --> 
<1-- 菜单 --> 
«/nav» 
«form» «!-- 二 级 --» 
«1-- 搜索 框 --> 
«/form» 
«/header» 
«section id-"feature area"»«!-- 一 级 --> 
«article id-"blog leadoff"»«!-- 二 级 --» 
<!-- 博客 内 容 --> 
«/article» 
«aside»x«!-- 二 级 --» 
«form«!-- 三 级 --> 
<1-- 登录 表单 --> 
</form> 
«nav»«l-- 三 级 --> 
<1-- 博文 链接 --> 
«/nav» 
«/aside» 
«/section» 
«section id-"promo area"»«!-- 一 级 --» 
«articlexc!-- 二 级 --> 


7.2 RE 





«div class-"inner"»«!-- 三 级 --> 
<!-- 图 书 封面 及 旋转 的 文字 --》> 
«/div» 
«/article» 
<!-- article € 4 4:;k--» 
«/section» 
«footer»«!-- 一 级 --» 
«1-- 页 脚 文 本 和 nav 元 素 --> 
«/footer» 
</div> «!-- wrapper 结束 --» 
fF —eouebs io ADR, PAREEK, ARMARE 
元 素 。 选 择 HTML 元 素 时 ， 一 定 要 考虑 它 的 语义 。 比 如 ， 荣 单列 表 显 然 应 该 放 在 一 


个 nav 元 素 中 。 


写 完 结构 化 标记 ， 可 以 先 通 过 body 元 素 设 定 页 面 的 字体 和 颜色 ， 再 利用 wrapper ix 
定 布局 宽度 ， 并 实现 布局 在 页 面 上 居中 。 


body { 
font-family:helvetica, arial, sans-serif; 
background:ttefefef; 
margin:0; 

} 


wrapper {width:980px; margin:O auto 20px;} 


好 啦 ， 下 面 就 要 一 步 一 步 地 为 页 面 的 结构 化 元 素 添 加 内 容 ， 同 时 设 定 CSS 样式 了 。 


7.2 RA 


先 从 页 眉 (header) 开始 吧 。 


«header» 
«section id-"title"» 
<h1>Stylin&#8217; with CSS«/h1» 
«h2»The Blog and Books of Charles Wyke-Smith«/h2» 
«/section» 
«nav class-"menu"» 
«ul» 
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«li class="choice1"><a href="#">Articles</a></li> 
<li class="choice2"><a href="#">Books</a></li> 
<li class="choice3" ><a href="#">Resources</a></li> 
<li class="choice4"><a href="#">Bookshelf</a></li> 
<li class="choice5"><a href="#">Contact Me</a></li> 
</ul> 
</nav> 
<form class="search" action="#" method="post"> 
«label for="user_name">search</label> «!-- 标注 的 for 属性 与 文本 框 ID 相 同 --> 
«input type-"text" id-"user name" name-"user name" placeholder- 
"search" /» 
«/form» 
«/header» 


页 眉 的 标记 分 三 部 分 ， 页 面 标题 ( sectiontttitle )、 搜 索 表 单 ( form.search) ) 和 导 


航 菜 单 ( nav.menu )。 


7.2.1 页 面 标 题 
我 们 把 hi 和 hz 元 素 定位 在 了 header 元 素 的 左上 角 。 以 下 是 CSS. 


header { 
position:relative; /* 为 页 面 标 题 和 搜索 表单 提供 定位 上 下 文 */ 
height:70px; /* 固 定 高 度 ， 包 围 绝对 定位 元 素 */ 
margin:10px 0; 
background:#fff; 
border-radius:20px Opx 20px Opx; /* 顺 序 : 左上 、 右 上 、 右 下 、 左 下 #/ 
box-shadow:0 12px 8px -9px #555; /# 负 扩展 值 把 阴影 定位 到 盒子 内 部 #/ 
padding:ipx; /* 防 止 子 元 素 外 边 距 全 加 */ 
} 
header section#title { 
position:absolute; 
width:300px; /* 宽 到 足以 不 让 文本 折 行 */ 
height:65px; /* 高 到 足以 容纳 两 行文 本 */ 
left:0px; /* 左 上 角 定 位 */ 
top:0; 
} 
header hi { 
padding:9px 12px 0; 
font-family:'Lato', helvetica, sans-serif; 
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font-weight:900; 
font-size:2.2em; 
line-height:1; 
letter-spacing:-.025em; 
color:#4eb8ea; 
} 
header h2 { 
padding:Opx 12px; 
font-family:"Source Sans Pro", helvetica, sans-serif; 
font-weight:400; /* 设 定 下 载 字 体 的 粗细 */ 
font-size:.9em; line-height:1; 
letter-spacing:-.025em; 
color:£333; 
) 
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& 7-3 为 h1 和 hz2 设 定 了 样式 ， 临 时 添加 的 边框 显示 了 它们 的 位 置 


这 里 要 注意 的 第 一 件 事 ， 就 是 明确 地 为 header 设 定 了 固定 高 度 。 在 前 面 的 例子 中 ， 

我 们 一 直 提倡 让 内 容 本 身 决定 结构 化 元 素 的 高 度 ， 让 高 度 随 内 容 增多 而 扩展 。 可 是 
在 这 里 ， 由 于 header 包含 的 是 绝对 定位 的 元 素 ， 该 元 素 不 会 影响 父 元 素 高 度 ， 所 以 
必须 明确 设 定 这 个 高 度 。header 的 内 容 是 极 少 会 改动 的 ， 因 此 未 来 也 不 大 可 能 出 现 
AAHH header 的 情况 。 











EK, MERE “MAAA, MAF” WER, MHA T header 及 页 面 中 的 很 多 
其 他 元 素 。 这 种 不 张扬 但 又 与 众 不 同 的 效果 ， 为 页 面 赋予 了 独特 的 外 观 。 要 了 解 如 
何 为 HTML 元 素 盒子 应 用 圆 角 ， 请 参考 附注 栏 “ 弧 形 角 ”。 


接着 ,给 sectiontttitle 设 定 了 绝对 定位 ， 在 确定 其 文本 内 容 的 大 小 和 内 边 距 之 后 ， 
又 给 它 设 定 了 足以 包含 这 些 文本 的 固定 宽度 和 高 度 。 


对 于 这 里 标题 的 文本 ， 我 们 使 用 了 Google Web 字体 Lato。 而 在 设 定 Google Web 字 
体 粗细 的 时 候 ，font-weight 属性 的 值 使 用 是 数字 值 。 这 跟 使 用 系统 安装 的 字体 不 一 
样 ， 对 于 系统 安装 的 字体 ， 浏 览 需 通 党 只 能 显示 font-weight 的 normal 和 bold 两 个 
值 。 要 了 解 有 关 Google Web 字体 的 更 多 信息 ， 请 回顾 第 4 章 。 
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另外 一 处 别出心裁 的 设计 ， 就 是 盒子 的 阴影 。 我 们 的 CSS 会 控制 这 些 阴 影 只 显示 在 
盒子 底部 ， 而 且 比 盒子 自身 罕 一 些 。 这 样 ， 盒子 就 好 像 在 页 面 上 攻 空 一 样 。 前 面 代 
码 中 加 粗 了 相应 声明 ， 有 关 盒 阴影 的 更 多 信息 请 参考 附注 栏 “ 盒 阴影 ”。 








页 面 标题 就 位 之 后 ， 接 下 来 我 们 再 采取 类 似 的 方法 把 搜索 框 定 位 到 页 眉 区 域 右 侧 。 


弧 形 角 





圆 角 效果 可 是 几 年 前 Web 2.0 网 页 的 招牌 式 设计 。 当 时 ,实现 简单 的 圆 角 要 用 复杂 的 JavaScript, 
或 者 得 用 庶 套 的 DIV 和 丝毫 不 差 的 图 片 定位 。 而 现在 ， 则 只 要 一 行 CSS 就 能 搞定 了 。 

最 简单 语法 形式 如 下 。 

border-radius:10px; 


这 样 ， 盒 子 的 四 角 都 会 变 成 半径 为 10 像素 的 圆 角 。 


如 果 要 单独 设 定 每 个 角 的 半径 ， 也 可 以 在 上 面 的 简写 属性 中 按 顺序 依次 指定 。 只 不 过 ,现在 指 
定 的 是 角 而 不 是 边 ， 所 以 “上 、 右 、 下 、 左 ”的 顺序 就 不 适用 了 ， 而 是 要 改 用 “左上 、 右 上 、 
Gl A e 


另外 ， 也 可 以 像 下 面 这 样 分 别 设 定 水 平和 垂直 半径 : 


border-radius:10px / 20px; 


e 


border-radius:10px; border-radius:10px / 20px; 


7-4 前 面 两 个 CSS 声明 的 效果 示例 

7-4 也 说 明了 为 什么 管 这 种 效果 叫 避 形 角 了 , 即 我 们 设 定 的 值 表示 的 是 位 于 角 内 部 的 圆 形 或 
椭圆 形 的 半径 。 

如 果 你 想 给 每 个 角 都 设 定 不 同 的 水 平和 垂直 半径 ， 写 法 如 下 : 

border-radius:10px 6px 4px 12px / 20px 12px 8px 24px; /* 4 个 水 平 值 ，4 个 垂直 值 */ 


最 后 提醒 大 家 ， 弧 形 角 不 一 定 要 通过 边框 才能 显示 出 来 。 大 家 看 到 图 7-1 中 的 菜单 了 吗 , 菜单 
的 圆 角 就 是 通过 元 素 的 青 景色 而 非 边框 显现 出 来 的 。 





盒 阴 影 

HTML 元 素 的 阴影 , 同样 是 CSS3 被 广泛 实现 之 前 很 难 做 出 来 的 一 个 效果 。 当时 ,要 给 元 素 添加 
阴影 效果 ， 必 须 用 图 片 和 DIV 配合 ， 还 要 耐心 地 调整 ， 而 现在 则 只 要 一 行 CSS 声明 即 可 。 

最 简单 语法 形式 如 下 。 

box-shadow:4px 4px 5px 8px #aaa inset; 


box-shadow 属性 的 这 几 值 分 别 代表 : 水 平 偏 移 量 、 垂 直 偏 移 量 、 模 糊 量 、 扩 展 量 、 颜 色 、 阴 
影 位 于 边框 内 部 〈 默认 位 于 边框 外 部 ， 即 outset ) o 








最 低 限 度 ， 必 须 设 定 水 平 偏 移 量 、 垂 直 偏 移 量 和 颜色 ,这 样 会 得 到 一 个 与 元 素 宽度 和 高 度 大 小 
一 致 且 为 指定 颜色 的 硬 边 阴 影 。 如 果 水 平和 垂直 偏 移 量 是 负 值 ， 阴 影 就 会 出 现在 元 素 左 上 方 。 
inset 关键 字 会 把 阴影 放 到 盒子 内 部 。 另 外 ，box-shadow 还 支持 多 个 阴影 声明 。 图 7-5 展示 了 






































一 些 阴 影 示 例 。 
4px 4px #aaa; 4px 4px 5px itaaa; -4px -4px 5px #aaa; 
4px 4px 8px 6px #aaa; Opx 12px 6px -7px #888 4px 4px 5px #777 inset, 


-4px -4px 5px #ccc inset; 


图 7-5 使 用 正 、 负 偏 移 量 ， 实 现 了 各 种 不 同 的 阴影 效果 


7.2.20 ”搜索 表单 


还 是 先 温习 一 下 标记 吧 。 


«form class-"search" action="#" method="post"> 

«label for-"user name"»search«/label» 

«input type-"text" id-"user name" name-"user name" placeholder-"search" /» 
«/form» 
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以 下 其 实 就 是 上 一 章 搜索 表单 示例 的 CSS。 唯 一 明显 不 同 的 ， 就 是 表单 在 页 眉 中 定 
位 的 方式 。 
form.search ( 


position:absolute; width:i150px; /* 宽 到 足以 容纳 扩展 后 的 搜索 框 */ 
top:23px; right:20px; /* 相 对 于 页 刷 右 上 角 定 位 */ 


.search input { 
float:right; width:70px; 
padding:2px O 3px 5px; 
border-radius:10px Opx 10px Opx; 
font-family:"Source Sans Pro", helvetica, sans-serif; 
font-weight: 400; 
font-size:1em; 
color:#888; 
outline:none; /* 去 挤 默 认 的 轮廓 线 */ 
-webkit-transition:2s width; /# 搜 索 框 过 渡 动 画 ， 别 忘 了 带 其 他 厂商 前 缓 的 属性 #/ 
) 
.search input:focus { width:140pxj}/# 在 获得 焦点 时 扩展 到 这 么 宽 #/ 
.search label(display:none;] 
form.search input (background-color:tfff;) 
form.search input::-webkit-input-placeholder {color:#ccc;} 


上 面 加 粗 的 代码 表明 ， 我 们 为 表单 元 素 设 定 了 宽度 ， 并 将 它 的 右边 相对 于 页 眉 的 右 
边 定位 。 如 图 7-6 中 临时 添加 的 边框 所 示 , 我 们 为 表单 设 定 了 足够 的 宽度 ,让 它 能 够 
容纳 扩展 后 的 输入 框 。 关 于 搜索 表单 我 不 想 在 这 儿 说 大 多 ， 因 为 上 一 章 已 经 详细 地 
讲 过 了 。 但 有 一 点 我 想 强 调 , 就 是 一 一 至 少 在 WebKit 浏览 器 中 一 一 可 以 给 占 位 符 文 
本 设 定 不 同样 式 ， 让 它 有 别 于 用 户 输入 的 文本 。 如 何 设 定 请 参见 前 面 代码 最 后 一 行 。 
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图 7-6 搜索 框 已 经 扩展 到 最 大 宽度 ， 其 边框 是 临时 添加 的 


7.2.3 菜单 


现在 ， 页 眉 两 端 有 了 两 个 绝对 定位 的 元 素 ， 这 两 个 元 素 已 经 离开 了 和 常规 文档 流 。 接 
下 来 ， 我 必须 让 汪 单 在 它们 之 间 居 中 。 这 里 的 菜单 使 用 的 也 是 第 6 章 的 菜单 ， 只 是 
少量 修改 了 几 个 地 方 而 已 。 
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7.2 RE 


Do 为 节省 版 面 ， 这 里 没有 列 出 生成 下 拉 菜 单 的 所 有 说 套 的 标记 。 如 果 你 想 回顾 如 何 用 
2o CSS 制作 下 拉 菜 单 ， 请 参考 第 6 章 。 


«nav class-"menu"» 


«ul» 
«li class-"choicei1"»«a href="#">Articles</a></li> 
«li class-"choice2"»«a href="#">Books</a> 
<!-- 更 多 菜单 项 --> 


«/nav» 


在 nav 元 素 中 的 仍然 是 普通 的 链接 列表 ,但 现在 每 个 列表 项 都 有 了 不 同 的 类 
方便 我 们 设 定 颜 色 。 


以 下 是 CSS。 


包含 


nav. 


menu { 

margin:19px auto; 

padding:0; 

text-align:center; /* 在 容器 内 居中 菜单 */ 
font-size:.8em; 


) 
nav.menu > ul ( display:inline-block;) /# 收 缩 包 紧 列 表 项 #/ 
nav.menu li ( 


nav. 


nav. 


nav 


float:left; /* 让 菜单 项 水 平 排列 */ 
list-style-type:none; /# 去 掉 默 认 的 项 目 符号 #/ 
position:relative; /* 为 子 列表 提供 定位 上 下 文 */ 

} 

menu li a ( 

display:block; /# 让 链接 填 满 列表 项 */ 

padding:.25em .8em; 

font-family:"Source Sans Pro", helvetica, sans-serif; 
font-style: normal; 

font-weight:600; 

font-size:1.2em; 

text-align:left; 

color:#fff; 

text-decoration:none; /* 去 挤 链 接 的 下 划 线 */ 
-webkit-font-smoothing: antialiased; /* Æ WebKit 浏览 器 中 平滑 字体 */ 
} 


menu li.choice1 a {background:#f58c21;} 


.menu li.choice2 a {background:#4eb8ea;} 
nav. 


menu li.choice3 a {background:#d6e636;} 
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nav.menu li.choice4 a (background:iee4c98;] 
nav.menu li.choice5 a (background:if58c21;] 
nav.menu li:hover > a { 

color:$555; 

border-color:tfff; 

border:0; 


nav.menu li:last-child a (border-bottom-right-radius:10px;) 

nav.menu li:first-child a (border-top-left-radius:10px;] 

页 面 标 题 和 搜索 表单 是 绝对 定位 ， 因 而 离开 了 常规 文档 流 。 换 句 话 说 ，nav 元 素 就 会 
当 它 们 不 存在 ， 而 在 水 平方 向 上 扩展 填充 父 元 素 header ( 图 7-7 )。 这 样 我 就 可 以 让 
菜单 在 页 面 上 居中 。 下 面 就 以 此 为 例 ， 再 讲 一 些 使 用 CSS 居中 元 素 的 技巧 。 
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图 7-7 ”菜单 在 页 眉 内 居中 了 。 由 于 左右 两 端的 页 面 标题 和 搜索 表单 都 因 绝对 定位 而 脱离 了 文档 
流 ， 所 以 nav 元 素 是 与 布局 同 宽 的 (如 临时 添加 的 边框 所 示 ) 


居中 没有 宽度 的 元 素 


在 一 个 元 素 内 居中 另 一 个 元 素 有 时 候 会 很 困难 。 对 于 和 常规、 静态 定位 的 元 素 ， 可 以 
让 它 向 左 或 向 右 浮 动 , 或 者 使 用 text-align 属性 让 它 在 父 元 素 内 居 左 、 居 右 或 居中 。 
还 可 以 利用 自动 外 边 距 ( margin:0 auto) 来 居中 元 素 。 这 些 方法 的 问题 在 于 ， 要 居 
中 的 元 素 必 须 是 有 宽度 的 。 像 这 里 用 于 构成 菜单 的 HTML 列表 ， 它 可 能 是 根据 数据 
库 信息 动态 生成 的 , 或 者 说 将 来 有 可 能 手工 编辑 ， 总 之 你 不 可 能 提前 设 定 它 的 宽度 。 
我 收 到 很 多 邮件 ， 都 是 询问 怎么 在 容 带 内 部 居中 菜单 的 。 下 面 也 算是 统一 回答 吧 ， 
我 们 来 看 看 怎么 居中 一 个 没有 设 定 宽度 的 元 素 。 


在 display 属性 的 值 中 , inline-block 具有 一 些 特殊 的 混合 行为 。 正如 它 的 名 字 所 暗 
示 的 ， 它 既 有 块 级 元 素 的 特点 ， 也 有 行内 元 素 的 行为 。 从 块 级 元 素 角 度 说 ， 可 以 为 
它 设 定 外 边 距 和 内 边 距 ， 也 可 以 通过 它 简 便 而 有 效 地 包围 其 他 块 级 元 素 。 从 行内 元 
素 角 度 看 ， 它 会 收缩 包 右 自己 的 内 容 ， 而 不 是 扩展 填充 父 元 素 。 换 句 话 说， 
inline-block 元 素 的 宽度 始终 等 于 其 内 容 宽度 。 这 种 元 素 还 有 一 个 特点 ， 就 是 可 以 
包围 浮动 元 素 。 不 过 , 这 种 元 素 也 有 一 个 问题 , 即 不 能 给 它 的 外 边 距 设 定 auto 值 一 一 
而 这 恰恰 又 是 在 更 大 的 容器 内 居中 元 素 的 最 简单 方法 。 




















7.2 RE 


解决 方案 就 是 为 要 居中 元 素 的 父 元 素 ( 这 里 的 nav) 应 用 text-align:center， 为 要 
居中 的 元 素 ( 这 里 的 ul) 设 定 display:inline-block， 让 它 包含 列表 项 。 这 样 设 定 
就 可 以 得 到 我 们 想 要 的 结果 : 没有 固定 宽度 的 元 素 也 能 在 其 父 元 素 内 居中 。 如 前 面 
代码 开头 加 粗 的 CSS 声明 所 示 ， 我 们 就 是 这 么 做 的 。 现 在 菜单 完美 居中 了 ， 因 为 其 
父 元 素 nav 忽略 了 两 端 绝 对 定位 的 元 素 ， 扩 展 到 了 与 header 同 宽 。 


为 了 演示 这 个 技巧 有 多 好 ， 我 们 来 去 掉 一 个 菜单 项 。 


如 图 7-8 所 示 , 去 掉 最 后 一 个 菜单 项 之 后 , 整个 菜单 照样 居中 。 对 于 不 同 用 户 会 看 到 
不 同 菜 单 ( 比如， 区 别 是 否 为 注册 会 员 ) 的 动态 站 点 来 说 ， 这 个 技巧 的 确 太 有 用 了 。 
还 有 一 个 地 方 要 特别 留意 ， 就 是 我 没有 直接 为 第 一 和 第 五 个 菜单 项 添加 圆 角 效果 , 
否则 将 来 如 果 增 减 菜单 项 就 会 出 问题 。 如 前 面 代码 末尾 加 粗 的 声明 所 示 , 为 了 让 CSS 
适应 菜单 项 的 动态 变化 ,我 们 把 圆 角 效果 应 用 给 了 :first-child 和 1ast-child 元 素 。 
这 样 一 来 ， 第 五 个 全 单项 被 删 掉 后 ， 第 四 个 菜单 项 就 会 成 为 最 后 一 个 子 元 素 ， 从 而 
取得 应 用 给 :1ast-child 的 圆 角 效 果 。 
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图 7-8 即使 去 掉 菜 单项 ， 菜 单 整体 上 仍然 居中 
添加 下 拉 菜 单 
下 面 ， 利 用 添加 下 拉 荣 单 的 机 会 ， 我 来 给 大 家 介绍 另 一 种 CSS 过 渡 效 果 。 


nav.menu li ul { 
opacity:0; visibility:hidden; /* 隐藏 下 拉 菜 单 */ 
position:absolute; /# 相 对 于 父 菜 单 定位 #/ 
width:12em; /* 下 拉 菜 单 宽度 */ 
left:0;  /*£ih 5S Xm Aux 
top:100%; /# 顶 边 与 父 菜 单项 底 边 对 齐 #/ 
-webkit-transition: 1s all; /# 设 定 过 渡 歼 果 #/ 
-moz-transition: 1s all; 
transition: 1s all; 


) 


nav.menu li:hover > ul { 


- 239 - 


- 240 - 


第 7 章 CSS3 实战 


opacity:1; visibility:visible; /* 两 个 属性 都 会 产生 过 渡 动 画 #/ 


nav.menu li li ( 
float:none; /* 去 挤 继 承 的 浮动 ， 让 菜单 项 上 下 堆 司 */ 
} 
nav.menu li li:first-child a {border-radius:0;} 
nav.menu li li:last-child a (border-bottom-left-radius:10px; : 
.no-csstransitions nav.menu li ul ( /# 针 对 不 支持 过 渡 的 浏览 器 
visibility:visible; /*& ži% Æ 93]*/ 
opacity:1;  /#k 履 盖 过 渡 声 明 #/ 
display:none; /* 如 果 不 支持 过 渡 ， 就 直接 隐藏 菜单 */ 
} 
.no-csstransitions nav.menu li:hover > ul { 
display:block; /* 在 父 菜 单项 是 停 时 显示 菜单 */ 


} 
这 里 的 代码 也 是 第 6 章 相应 例子 中 的 代码 ， 所 以 如 果 有 什么 问题 Batu a 6 
章 以 及 前 面 CSS 中 的 注释 。 不 过 ， 关 于 这 里 的 菜单 ， 我 还 起 跟 大 家 解释 Zo 


首先 ， 下 拉 菜 单 会 继承 圆 角 样式 。 但 对 于 下 拉 荣 单 来 说 ， 我 们 不 想像 顶级 菜单 一 样 
把 该 样式 应 用 到 对 角 上 ， 而 只 想 应 用 给 最 后 一 个 菜单 项 下 面 的 两 个 角 。 所 以 ， 我们 
窗 盖 了 继承 的 左上 角 的 圆 角 边框 ， 又 给 左下 角 添 加 了 圆 角 边框 样式 。 当 然 , 右 下 角 
的 圆 角 边框 仍然 是 继承 来 的 ( 图 7-9 )。 





Books 


The Blog and Books of Charles Wyke-Smith 


Visual Stylin' with 
CSS3 





图 7-9 添加 了 下 拉 菜 单 


其 次 ， 代 码 注 释 里 也 提 到 了 ， 我 们 为 下 拉 菜 单 应 用 了 不 透明 度 过 渡 ， 让 它 产生 淡 入 
效果 。 我 一 开始 只 使 用 了 opacity 属性 ， 把 它 的 起 始 值 设 定 为 0( 透明， 不 可 见 )， 

终止 值 设 定 为 1 ( 不透明， 完全 可 见 )。 这 样 确 实 可 以 在 鼠标 悬 停 时 让 下 拉 菜 单 淡 人 
淡出 ， 但 即使 不 可 见 的 时 候 ， 它 也 会 在 那里 。 换 句 话 说， 鼠标 移动 到 顶级 菜单 项 下 
方 ,甚至 还 没有 到 那 一 项 时 , 其 下 拉 荣 单 就 会 淡 入 。 后 来 ,我 又 尝试 添加 display:none 
和 display:block， 即 在 非 悬 停 状态 完全 去 掉 下 拉 菜 单 。 这 倒是 解决 了 下 拉 菜 单 “ 占 
位 ”的 问题 ， 但 过 渡 效 果 就 没有 了 ， 下 拉 菜 单 会 突然 出 现 、 消 失 。 然 后 ， 我 又 放弃 





7.2 RE 


display, PUTES e visibility 属性 ， 同 时 过 渡 opacity。 结 果 是 下 拉 菜 
单 淡 入 ， 但 会 突然 消失 。 最 后 ， 还 是 同时 过 渡 opacity 和 visibility 属性 解决 了 问 
题 一 一 菜单 在 透明 时 消失 无 形 ， 淡 入 和 淡出 都 正常 了 。 说 了 这 人 么 多 ， 主 要 是 想 告 诉 
大 家 ， 有 时 候 要 得 到 某 个 结果 ， 总 免不了 要 多 试验 几 次 。 不 过 我 还 是 很 欣慰 的 ， 
为 我 的 试验 能 让 大 家 节省 好 几 个 小 时 。 大 家 就 不 用 跟 我 客气 啦 ! 


第 三 , 我 还 利用 这 个 机 会 向 大 家 展示 了 Modemizr 在 实际 中 的 应 用 , 通过 它 为 那些 不 
支持 CSS3 过 渡 的 浏览 器 提供 了 后 备 CSS 声明 。 具 体 来 说 ， 在 不 支持 过 渡 的 浏览 咒 
中 ，Modernizr 会 在 页 面 加 载 后 为 项 级 HTML 标签 添加 no-csstransitions 类 。 我 们 
可 以 把 这 个 类 名 放 到 选择 符 里 , 写 几 条 只 有 不 理解 CSS 过 渡 的 浏览 器 才 会 用 的 规则 。 
在 这 些 规则 里 , 去 掉 在 支持 过渡 的 浏览 器 中 控制 菜单 的 visibility 和 opacity 声明 ， 
为 能 力 欠 缺 的 浏览 器 提供 基本 的 display:none 和 display:block 声明 ,实现 第 6 章 那 
种 简单 的 显示 和 隐藏 菜单 的 效果 。 


到 现在 为 止 ，header 部 分 已 经 完事 了 。 下 一 节 ， 我 们 学 习 怎么 为 功能 区 设 定 样式 ， 
这 个 区 域 包 括 博客 文章 、 登 录 表 单 和 博文 链接 。 


垂直 居中 


用 CSS 实现 垂直 居中 也 不 简单 。 如 果 你 想 在 一 个 固定 高 度 的 元 素 内 垂直 居中 一 行文 本 , 可 以 把 
这 一 行文 本 的 line-height 设 定 为 该 元 素 的 高 度 。 假 设 元 素 高 度 为 300 像素 ， 可 以 这 样 写 : 


text-align:center; /* 水 平 居中 */ 
line-height:300px; /# 重 直 居 中 : 行 高 = 容器 高 度 */ 








如 果 想 垂直 居中 其 他 元 素 ， 比 如 图 片 ， 可 以 将 容器 的 display 属性 设 定 为 table-row， 表 设 定 
(只 对 单元 格 有 效 的 ) vertical-align 属性 为 middle， 比 如 : 
display:table-cell; /* 借 用 表格 的 行为 */ 


vertical-align:middle; /*& &J£ v */ 
text-align:center; /# 水 平 居中 #/ 





尽管 这 些 方案 都 不 够 自然 ， 但 CSS 没 提供 什么 垂直 定位 元 素 的 属性 ， 也 就 只 能 这 么 将 就 了 。 
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7.3 ”专题 区 


页 面 的 专题 区 主要 用 于 展示 最 新 博客 文章 的 前 几 段 文字 , 同时 右 侧 还 有 一 小 块 区 域 ， 
显示 登录 表单 和 最 近 博 文 的 一 组 链接 ,以 下 就 是 section#feature_area 元 素 的 HTML 
标记 。 


«section id="feature area"» 
«article id-"blog leadoff"» 
«div class-"inner"» 
«h4»September 7, 2012«/h4» 
«a hrefz"i"»«h3»Managing CSS Classes with jQuery</h3></a> 
«img src-"images/charles wyke-smith.jpg" alt-"Charles Wyke-Smith 











photo" /» 
«p»Sintus at neque in magna...«/p» 
«/div» 
«/article» 
«aside» 


«form autocomplete-"off" class-"signin" 
action-"process form.php" method-"post"» «!-- 必要 的 <form> 标 签 --> 
《<fieldset> <1-- 作为 表单 控件 的 容器 --> 
《1-- 控件 组 的 标题 --> 
«legend»«span»Sign In for Code and Updates«/span»«/legend» 
«section» <!-- 用 于 为 控件 、 标 注 和 说 明 添 加 样式 的 外 包装 --> 
《1-- 与 控件 ID 同名 的 for 属性 将 标注 与 控件 关联 起 来 --> 
«label for-"email"»Email«/label» 
«1-- type 属性 的 text 值 表明 这 是 文本 框 --> 
«input type-"text" id-"email" name-"email" /» 
«/section» 
«section» 
«label for-"password"»Password«/label» 
«input type="password" id-"password" name-"password" 
maxlength-z"20" /> 《!-- RAE P FA X48 794843 --> 
«p class-"direction"»Wrong user name or password«/p» 
«/section» 
«section» <1-- 提交 按钮 --> 
«input type="submit" value-"Sign In" /> 
«p class-"signup"»Not signed up? «a href="#">Register now! 
«/a»«/p» 
«/section» 
«/fieldset» 


- 242 - 


7.3 ”专题 区 


</form> 
«nav» 
«h3»Recent Articles«/h3» 
《<1-- 博文 链接 --> 
«/nav» 
«/aside» 
«/section» 


这 个 section 元 素 与 容器 同 宽 , 我 们 要 把 它 包含 的 article fll aside 元 素 浮动 为 并 列 
显示 。 


sectionitfeature area { 
overflow:hidden; /* 包 围 浮动 的 子 元 素 */ 
margin:16px 0 0; /* 在 页 眉 与 专题 区 之 间 贸 出 间隙 */ 
padding:0 0 10px; 


section#feature area article {float:left; width:66%;} 
section#feature area aside {float:right; width:34%;} 


这 样 就 在 容器 里 创建 了 两 栏 。 注 意 ， 两 栏 的 宽度 是 用 百分比 值 设 定 的 ， 这 是 因为 这 
个 页 面 还 要 考虑 适应 不 同 的 设备 ， 包 括 平板 电脑 和 智能 手机 。 具 体内 容 将 在 下 一 章 
讲解 。 为 此 ， 两 栏 就 用 容器 宽度 的 百分比 来 设 定 了 。 

此 时 ， 应 该 在 article 元 素 内 部 添加 一 个 内 部 div (前 面 HTML 标记 中 加 粗 了 )， 以 
便 围 绕 内 容 设 定 圆 角 边框 。 之 后 ， 就 是 article 区 域 的 样式 。 


section#feature area article .inner {/* 带 圆 角 和 阴影 的 容器 */ 
padding:12px; 
background:#fff; 
border-radius:20px 0; 
box-shadow:0 12px 8px -9px #555; 
) 
sectionffeature area article a {text-decoration:none;}/* 博 文 标题 链接 */ 
section#feature area article img { /* 照 片 */ 
float:left; 
padding:O 10px 10px 0; 
) 
sectionitfeature area article h4 ( /* 日 期 */ 
font-family:"Source Sans Pro", helvetica, sans-serif; 
font-style:normal; 
font-weight:400; 
font-size:1em; 
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color:$f58c21; 
letter-spacing:-.025em; 
} 
section#feature area article h3 { /* 博 文 标题 */ 
font-family:Lato, helvetica, sans-serif; 
font-style:normal; 
font-weight:700; 
font-size:1.75em; 
color:#555; 
margin:Opx 0 12px Opx; 
letter-spacing:-.05em; 
} 
section#feature area article#blog leadoff p { /* 博 文 内 容 */ 
font-family:"Source Sans Pro", helvetica, sans-serif; 
font-style: normal; 
font-weight:400; 
font-size:1.1em; 
line-height:1.5em; 
color:#616161; 
margin:O Opx; 
text-align: justify; 
} 
section#feature area article#blog leadoff p::first-letter ( /# 首 字母 下 沉 #/ 
font-family:Lato, helvetica, sans-serif; 
font-style: normal; 
font-weight:700; 
font-size:4.5em; 
float:left; 
margin:.05em .05em O 0; 
line-height:0.6; 
text-shadow:1px 3px 3px #ccc; /*IE10 及 以 上 版 本 支持 文本 阴影 */ 
) 
sectionitfeature area articletblog leadoff p::first-line ( /# 首 行 小 型 大 写字 母 */ 
font-variant:small-caps; 
font-size:1.2em; 
} 
section#feature area aside { /* 右 栏 */ 
width:34%; 
float:right; 
} 
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tortor egestas eu adipiscing enim pellentesque. Cras condimentum 
tellus in nisl sodales tortor ut tortor egestas eu adipiscing 


adipiscing. Maecenas pharetra mattis sodales tortor ut tortor egestas eu 


adipiscing enim urna, eu adipi scing diam pharetra ac. 





7-10 sectionitfeature area 中 的 aticle 元 素 在 设 定 了 样式 之 后 的 效果 


这 些 样 式 涵盖 了 本 书 前 几 章 介绍 一 些 元 素 。 值 得 一 提 的 是 包含 h3 的 a 元 素 。 要 是 在 
以 前 ， 行 内 元 素 包含 块 级 元 素 可 是 大 忌 。 但 从 HTMLS 开始 ，a 元 素 可 以 包含 任何 元 
素 ， 这 当然 为 把 任何 元 素 转换 成 可 以 点 击 的 链接 提供 了 方便 。 


如 图 7-10 所 示 ， 有 照片 浮动 到 左 侧 ， 所 以 文本 绕 排 。 然 后 我 们 采用 第 4 章 讨论 的 首 字 
母 下 沉 和 首 行 大 型 小 写 样式 ， 为 版 式 添加 了 一 点 趣味 性 ， 也 让 字形 过 渡 更 加 自然 。 
另外 , 我 们 还 给 放大 的 第 一 个 字母 添加 了 文本 阴影 ， 让 它 看 起 来 像 是 巧 浮 在 页 面 上 。 
好 了 ， 下 面 该 讲 为 表单 添加 样式 了 。 


文本 阴影 

文本 阴影 与 本 章 前 头 讲 过 的 使 阴影 很 相似 ， 它 的 语法 如 下 : 

text-shadow:4px 4px 5px #aaa; 

text-shadow 这 几 值 的 含义 按 顺 序 分 别 是 : 水 平 偏 移 量 、 垂 直 偏 移 量 、 模 糊 量 和 颜色 。 与 盒 阴 
影 不 同 的 是 ， 文 本 阴影 没有 扩展 量 。 最 低 限 度 ， 你 得 提供 水 乎 偏 移 量 、 垂 直 偏 移 量 和 颜色 值 。 
如 果 水 平和 垂直 偏 移 量 是 负 值 ， 阴 影 就 会 出 现在 文本 左上 方 。 另 外 ，text-shadow 还 支持 多 个 


阴影 声明 。 图 7-11 展示 了 一 些 阴影 示例 。 要 了 解 文本 阴影 更 高 级 的 应 用 技巧 ， 请 大 家 参考 我 
的 电子 书 Visual Stylim with C553。 
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R X Z 


4px 4px #aaa; -4px -4px 5px #aaa; Opx 12px 7px #c8e494; 
4px 4px 5px #aaa; 4px 4px 8px #aaa; color:#fff; 


4px 4px 5px #777, 
-4px -4px 5px ite8e8e8; 


图 7-11 使 用 正 、 负 偏 移 量 ， 实 现 了 各 种 不 同 的 阴影 效果 


7.3.1 登录 表单 


我 要 求 读者 必须 注册 才能 下 载 本 书 示 例 人 代码， 以便 提供 更 新 并 与 大 家 保持 联系 。 在 
这 个 主页 上 ， 提 供 了 一 个 登录 表单 和 一 个 指向 注册 表单 的 链接 ， 注 册 表单 是 为 第 一 
次 访问 网 站 的 读者 准备 的 。 登 录 表 单 的 标记 与 第 6 间 介 绍 的 表单 采用 相同 的 结构 方 
式 ， 以 下 是 其 HTML。 








«form autocomplete-"off" class-"signin" 
action-"process form.php" method-"post"» <!-- 必要 的 <form> 标 签 --» 
«fieldset» 
《1-- 控件 组 的 标题 --> 
«legend»«span»Sign In for Code and Updates«/span»«/legend» 
«section» <1-- 电子 邮件 --» 
《1-- 与 控件 ID 同名 的 for 属性 将 标注 与 控件 关联 起 来 --> 
«label for-"email"»Email«/label» 
«1-- type 属性 的 text 值 表明 这 是 文本 框 --> 
«input type-"text" id-"email" name-"email" /» 
«/section» «l-- 密码 --» 
«section» 
«label for-"password"»Password«/label» 
«input type="password" id-"password" name-"password" 
maxlength-"20" /> 
《1-- 只 有 添加 erTOT 类 才 会 显示 --> 
«p class-"direction"»Wrong user name or password«/p» 
«/section» 
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«section» <!-- 提交 按钮 --> 
«input type-"submit" value-"Sign In" /> 
«p class-"signup"»Not signed up? «a href="#">Register now!«/a»«/p» 
«/section» 
«/fieldset» 
</form> 


下 面 是 我 从 第 6 章 表单 的 CSS 中 拿 来 的 规则 ， 并 针对 这 个 表单 修改 后 的 代码 。 


form.signin ( 
width:i9em; /* 表 单 的 整体 宽度 */ 
float:right; 
background:#fff; 
border-radius:10px 0 10px O0; 
box-shadow: O 12px 8px -9px #555; 
} 
.signin fieldset ( border:0; margin:10px 14pX;j}/# 去 掉 默 认 的 边框 */ 
.signin legend span { 
font-family:Lato, helvetica, sans-serif; 
font-weight:700; font-size:1.3em; line-height:1.1em; 
color:i4eb8ea; 
letter-spacing:-.05em; 
) 
.signin section { 
overflow:hidden; /* 包 围 控件 和 标注 */ 
padding:.25em 0; /* 表 单元 素 的 间距 */ 
} 
.Signin section label { 
font-family:"Source Sans Pro", helvetica, sans-serif; 
font-weight:400; 
float:left; 
width:5em; /* 标 注 栏 的 宽度 */ 
margin:.5em .3em 0 0; /* 外 边 距 保持 文本 与 控件 的 间距 */ 
line-height:1.1; 
color:#555; 
} 
.Signin section input { 
float:right; 
width:10.5em; /* 控 件 栏 的 宽度 */ 
margin:.2em 0 0 .5em; 
padding:3px 10px 2px; /* 输 入 文本 与 控件 的 间距 */ 
color:#555; 
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font-size:.8em; 


outline:none; /* 去 挤 默 认 的 轮廓 线 */ 


border-radius:10px 0 10px 0; 


} 


input:-webkit-autofill { color:#fff !important; ) /# 去 掉 WebKit 默认 的 黄色 背景 */ 


.Signin section input[type-submit] { 
float:right; /* 将 按钮 与 控件 右边 
width:auto; /* 重 设 按 钮 宽度 */ 
margin:0 2px 3px 0; 
padding:Opx 8px 3px; 
font-size:1em; 
font-weight:800; 
color:#fff; 
border:none; 
background-color :#d6e636 
box-shadow:1px 1px 2px #888; 


} 


对 齐 */ 


.Signin section p{ /# 内 容 为 "not signed up?"*/ 


float:right; 
clear:both; 
margin:.2em O 0; 
text-align:right; 
font-size:.8em; 
line-height:1; 
color:#555; 
} 

.Signin section 

.Signin section 
color:#777; 
text-decoration:none; 


p a { color:#333; 
p a:hover { 


} 


}/* 到 注册 表单 的 链接 */ 


.Signin section p.direction.error ( /* 错 误 消息 */ 


display:block; 
color:£f00; 


) 


/# 添 加 error 类 后 ， 把 说 明文 字 变 成 红色 */ 


.signin section p.direction { display:none; } /* 隐 藏 错误 消息 */ 


无 论 多 简单 ， 表 单 所 需 的 代码 总 
注释 看 基本 都 能 理解 。 我 想 提 一 下 错误 消 , 


是 很 多 ! 好 在 ,这 里 的 代码 大 部 分 都 很 直观 ， 配 合 











a, È Se BE S 
要 给 











显示 (如 图 7-12 所 示 )。 8. H 


素 再 添加 一 个 error 类 即 可 。 不 过 


(已 经 有 了 direction 类 的 ) 
个 类 是 eb 


7.3 ”专题 区 


为 负责 网 站 UI 的 人 , 添加 这 种 平时 隐藏 的 HTML 元素 和 显示 它 的 CSS 是 你 的 事 儿 。 
至 于 什么 时 候 添 加 error 类 显示 错误 消息 ， 那 就 是 开发 团队 的 事 儿 了 。 








Email | 





Password ( 


Wrong user name or password 


Not signed up? Register now! 





图 7-12 ”登录 表单 及 显示 错误 消息 时 的 效果 


7.3.2 ”博文 链接 


表单 下 面 是 博文 链接 。 与 以 往 一 样 ， 我 使 用 了 无 序列 表 来 组 织 链接 。 


<nav> 
<h3>Recent Articles</h3> 
«ul» 
<li><a hrefz"i"»z-index&mdash;Layers of Confusion«/a»«/li» 
<li><a href="#">Box-Image Techniques«/a»«/li» 
<li><a href="#">Shadow FX with CSS3«/a»«/li» 
</ul> 
</nav> 


CSS 如 下 。 


sectionitfeature area nav { 
width:i19em; /* 容 器 整体 宽度 */ 
float:right;/* 与 区 域 右边 对 齐 */ 
margin:15px 0 0; /* 上 方 间距 */ 
padding:.6em Oem .75em; /* 链 接 上 下 的 间距 */ 
background:#fff; 
border-radius:10px O 10px 0; 
box-shadow: O 12px 8px -9px #555; 
} 

#feature_area nav h3 { 
padding:O 14px 0; /# 标 题 左右 的 空间 *#/ 
font-family:Lato, helvetica, sans-serif; 
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font-weight:700; 
font-size:1.3em; 
text-align:left; 
color:£aaa; 
letter-spacing:-.05em; 
} 

#feature area nav ul { margin:0em O 0 20px; } 

#feature area nav li { 
padding:.7em O O 2em; 
position:relative; /* 项 目 符 号 的 定位 上 下 文 */ 
list-style-type:none 
} 

#feature area nav li:before { /* 定 制 项 目 符 号 */ 
content:""; /# 用 空 字 符 串 ， 因 为 不 需要 实际 内 容 *#/ 
position:absolute; /* 相 对 于 列表 项 定位 */ 
height:10px; /* 项 目 符 号 大 小 */ 
width:10px; 
left:12px; /* 定 位 项 目 符号 */ 
top:12px; 
border-radius:5px 0 5px 0; /* 项 目 符号 形状 */ 
background-color:#d6e636; /# 项 目 符号 颜色 #/ 
box-shadow:1px 1px 2px #888; 

) 

#feature area nav li a ( 
display:block; /* 链 接 与 列表 项 同 宽 */ 
text-decoration:none; /# 去 掉 默 认 的 下 划 线 *#/ 
font-size:.9em; 
color:#616161; 

} 


#feature area nav li a:hover { color:#000; } 


添加 了 样式 之 后 的 链接 区 就 在 登录 表单 正 下 方 。 它 们 都 是 aside 元 素 的 子 元 素 ， 而 
aside 元 素 通 过 浮动 与 article 元 素 并 列 在 一 行 。 


与 浮动 form 元 素 一 样 ， 浮 动 nav 元 素 可 以 让 它 直 接 定 位 在 表单 下 方 。 列 表 的 其 他 部 
分 没有 什么 特别 ， 但 为 了 体现 “两 个 圆 角 ， 两 个 方 角 ” 的 设计 风格 ， 我 们 要 重新 定 
制 项 目 符号 。 为 此 ， 我 们 抛弃 用 图 片 作 为 列表 项 记号 的 常规 做 法 ， 使 用 : :before 创 
ET 10 像素 见方 的 伪 元 素 ， 并 将 其 两 角 变 成 圆 角 。 而 一 个 像素 的 小 阴影 则 让 这 些 项 
目 符号 产生 了 跳 脱 页 面 的 假象 。 
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Email | 





Password 
Wrong user name or password 


Not signed up? Register now! 


Z-index— Layers of Confusion 


Box-Image Techniques 


Shadow FX with CSS3 





7-13 ”完成 博文 链接 ，aside 元 素 的 样式 就 写 好 了 


7.4 ABK 


接 下 来 ， 有 四 本 图 书 封面 的 展示 区 位 于 页 面 底部 。 为 了 给 这 一 部 分 增添 趣味 性 ， 我 
们 要 使 用 弹出 层 和 旋转 文本 。 先 看 HTML 标记 。 





«section id-"book area"» 
«article class-"left"» 
«div class-"inner"» 
«h3»HTML5 + CSS3«/h3»«!-- 要 旋转 的 文字 --» 
«img src-"images/stylin cover.png" alt-"Stylin' with CSS cover" /» 
«aside» «!-- 弹出 层 --» 
«ol» 
<li><a href="#">Download the Code«/a»«/li» 
<li><a href="#">Table of Contents«/a»«/li» 
<li><a href-"f"»Buy this Book«/a»«/li» 
«/ol» 
«/aside» 
«/div» 
«/article» 
《1-- 另外 三 本 图 书 的 标记 也 一 样 --> 
«/section» 


- 251- 


- 252 - 


第 7 章 CSS3 实战 


怎么 样 ，HTML 代码 极其 简单 ， 同 样 的 标记 重复 四 次 ， 就 是 四 本 书 。 下 面 来 看 看 相 
关 的 CSS 吧 ， 先 看 看 布局 和 旋转 文本 的 样式 ， 然 后 再 看 弹出 层 的 样式 。 


section#book area  ( /* 与 布局 同 宽 */ 
clear:both; 
border-radius:20px Opx 20px Opx; 
border:1px solid #f58c21; 
margin:8px 0 16px; /* 上 下 间距 */ 
overflow:hidden; 

} 

#book area article ( /* 四 本 书 四 栏 */ 
float:left; 
width:2596; 
padding:10px 0; 
background: none; 

) 

#book area article .inner ( /* 封 面 外 包装 */ 
position:relative; /* 为 弹出 层 提 供 定位 上 下 文 */ 
width:140px; /* 包 装 每 一 本 书 */ 
margin:0 auto; /* 在 各 自 article 元 素 内 居中 每 一 本 书 */ 
} 

#book area „inner h3 ( /* 旋 转 文字 */ 
position:absolute; 
width:160px; 
left:112%; bottom:5px; /* 把 文字 定位 在 图 书 右 侧 */ 
transform:rotate(-90deg); /* 旋 转 文 字 需 要 使 用 带 厂商 前 级 的 属性 */ 
transform-origin:left bottom; /* 设 定 旋转 中 心 点 ， 需 要 带 厂 商 前 级 的 属性 */ 
color:#ccc; 
font-size:1.4em; 
font-family:Lato, helvetica, sans-serif; 
font-style:normal; 
font-weight:900; 
text-align:left; 

) 

[FCU 893p d S ETSI) 82 48 3X / 

#book area article.right:last-child h3 { left:85%; } 

#book area article img { box-shadow: O 12px 8px -9px #555; }/* 封 面 阴影 */ 


在 与 布局 同 宽 的 section#book_area 元 素 中 ， 我 们 浮动 了 四 个 article 元 素 ， 每 个 元 
素 的 宽度 都 设 定 为 25%。 在 这 四 个 article "P, 分 别 使 用 一 个 有 宽度 的 内 部 div KE 


7.4 图 书 区 





含 图 书 封面 。 这 样 就 可 以 为 图 书 封面 之 间 添 加 适当 的 间距 ， 如 图 7-14 所 示 。 接 下 来 
要 做 成 弹出 层 的 aside 元 素 目 前 还 处 于 隐藏 状态 。 


® 

s. 

Scriptin' 
“JavaScript 


oms Ajax 


N 
e 





图 7-14 ”图书 区 的 每 本 书 封面 的 右 侧 都 有 自己 的 描述 性 标题 


旋转 文字 是 用 CSS3 的 transform 属性 的 两 个 函数 实现 的 。 第 一 个 函数 是 
transform-origin， 用 于 把 旋转 变换 的 原点 设 定 为 h3 元 素 盒子 的 左下 角 。 这 里 的 原 
点 指 的 是 旋转 的 中 心 点 ， 就 好 像 我 在 那个 地 方 插 进去 一 根 大 头 针 一 样 。 然 后 用 
transform 的 rotate KGE h3 元 素 旋转 90 E, 最 后 再 将 它们 向 上 移动 5 像素。 关于 
transform 属性 的 更 多 介绍 ， 请 参考 附注 栏 “CSS3 ERR", WR, TE 
买 我 的 电子 书 Visual Stylin’? with CSS :) 


CSS3 变换 


如 果 你 用 过 Adobe Illustrator 或 Fireworks 等 平面 图 形 设计 软件 ,可 能 知道 对 文本 和 其 他 元 素 进行 旋 
转 、 缩 放 和 和 斜 切 变换 。 现在 , 通过 CSS3 变换 在 浏览 器 中 也 能 实现 同样 的 效果 了 (如 图 7-15 所 示 )。 


CSS3 为 变换 规定 了 两 个 属性 : transform 和 transform-origin。 先 说 说 transform。 
transform 属性 能 够 调用 函数 ， 调 用 不 同 的 变换 函数 可 以 实现 不 同形 式 的 变换 ， 而 通过 传 入 的 
参数 值 可 以 控制 变换 的 结果 。 通 过 transform 属性 调用 变换 函数 的 语法 如 下 : 

transform: 函 数 名 (数值 或 X、y 值 ); 

以 下 是 CSs3 规定 的 变换 函数 。 


口 scale: 用 于 放大 或 缩小 元 素 ( 指定 大 于 1 的 值 放 大 元 素 , 小 于 1 的 值 缩 小 元 素 ), 如 transform: 
scale(1.5)。 

O rotate: 根据 指定 的 度数 旋转 元 素 ( 正 值 顺 时 针 旋转 ， 负 值 逆 时 针 旋 转 ) ， 如 transform: 
rotate(-30deg)。 

O skew: 让 元 素 在 x 轴 和 y 轴 方 向 倾斜 (只 指定 一 个 值 ，y 轴 不 受 影响 ) ， 如 transform: 
skew(5deg, 50deg). 
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Q translate: 根据 指定 的 距离 沿 x 轴 和 y 轴 平 移 对 象 ( 很 像 相对 定位 ， 因 为 对 象 初始 占据 的 
空间 会 保留 ) ， 如 transform:translate(-50px，20px)。 


transform-origin 属性 设 定 元 素 围绕 其 变换 的 原点 。 默 认 情 况 下 ， 这 个 点 是 元 素 垂 直 和 水 平 
方向 的 中 心 点 。 因 此 ,如果 你 旋转 元 素 而 未 另行 指定 原点 ， 就 会 像 在 元 素 中 心 点 插 进 一 根 大 头 
针 一 样 ， 然 后 元 素 围 绕 该 点 旋转 。 可 以 使 用 transform-origin 属性 及 位 置 关 键 字 (left, 
center, right, top 和 bottom 等 ) 另行 设 定 原点 ， 而 使 用 正 、 负 数字 甚至 可 以 把 原点 设 定 到 
元 素 边 界 之 外 。 








transform: skew(10deg); transform: skew( -10deg, 30deg) ; 





transform:rotate(20deg); transform:rotate(20deg); transform:translate 
transform-origin:bottom right; (30px, -30px) ; 


7-15 ” 几 个 变换 的 例子 


现在 该 为 每 本 书 添加 弹出 层 了 。 以 第 6 章 那 个 弹出 层 示 例 为 基础 , 还 要 进行 两 点 改进 。 
首先 ， 证 页 面 右 侧 图 书 的 弹出 层 显 示 在 封面 图 片 左 侧 ， 以 免 出 现在 右 侧 被 浏览 器 窗口 
"Uh"; 其次， 把 箭头 图 形 放 在 弹出 层 一 边 ， 让 人 感觉 它 也 是 弹出 层 边 框 的 一 部 分 。 
经 验 告诉 我 们 ， 像 这 种 看 似 不 起 眼 但 却 很 有 意思 的 改进 ， 往 往 要 编写 很 多 代码 。 


如 果 你 现在 看 看 前 面 的 标记 , 会 发 现 我 已 经 给 包含 图 书 的 article 元 素 分 别 添加 了 left 
和 right 类 ， 以 便 分 别 设 定 出 现在 封面 右 侧 和 左 侧 的 弹出 层 和 箭头 。 下 面 就 是 CSS mi 


#book area article aside { /* 弹 出 层 共享 样式 开始 */ 
display:none; /* 隐 藏 弹出 层 */ 
position:absolute; /* 相 对 于 包含 图 片 的 内 部 div*/ 
z-index:2; 
width:200px; /* 弹 出 层 宽 度 */ 
background:#fff; 
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padding:10px 2px 5px; /* 弹 出 层 内 容 边 距 */ 
border:2px solid #f58c21; 
border-radius:10px Opx 10px Opx; 
box-shadow:4px 4px 16px #555; 
color:#555; 
font-family:"Source Sans Pro", helvetica, sans-serif; 
font-size:.8em; 
line-height:1.5em; 
) 
#book area article:hover aside { display:block; )/*£UR;E ET Hp m X nRBE*/ 
#book area article aside li ( 
padding:.25em 0 .75em 1em; /* 列 表 项 的 垂直 间距 和 左边 距 */ 
list-style-type:none; /# 去 掉 默 认 的 项 目 符号 #/ 
line-height:1.2em; 
} 
#book area article aside 1i a { /* 链 接 文 本 */ 
text-decoration:none; 
font-size:1.2em; 
color:#616161; 
} 
#book area article aside li a:hover { /* 蚌 停 时 突显 链接 */ 
color:#333; 
} /* 弹 出 层 共享 样式 结束 */ 


#book area article.left aside {/* 左 侧 两 本 书 */ 
left:84%; top:i4px; /* 把 弹出 层 定位 在 图 片 右 侧 */ 
} 

#book area article.right aside {/* 右 侧 两 本 书 */ 
right:84%; top:14pX;/* 把 弹出 层 定位 在 图 片 左 侧 */ 
} 

#book area article aside:after { /* 橙 色 三 角形 */ 
content:""; /* 需 要 有 内 容 ， 这 里 是 一 个 空 字符 串 */ 
position:absolute; /* 相 对 于 弹出 层 定位 */ 
top:33px; 
border:12px solid; 
height:Opx; width:Opx; /* 收 缩 边框 创造 三 角形 */ 


} 
#book area article.left aside:after ( /* 左 侧 图 书 弹 出 层 的 三 角形 定位 及 颜色 */ 
right:100%; 


border-color:transparent #f58c21 transparent transparent; 


} 
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ilbook area article.right aside:after ( /* 右 侧 图 书 弹出 层 的 三 角形 定位 及 颜色 */ 
left:100%; 
border-color:transparent transparent transparent #f58c21; 


} 

#book area article aside:before { /* 白 色 三 角形 */ 
content:""; /* 需 要 有 内 容 ， 这 里 是 一 个 空 字符 串 */ 
position:absolute; /* 相 对 于 弹出 层 定位 */ 
border:8px solid; 
height:Opx; width:Opx; /* 收 缩 边 框 创造 三 角形 */ 
z-index:100; /* 保 证 白色 三 角形 在 最 前 面 */ 
top:37px; 

} 

#book_area article.left aside:before { /* 左 侧 图 书 白色 三 角形 的 样式 、 位 置 和 颜色 */ 
right:100%; 
border-color:transparent white transparent transparent; 


} 

#book_area article.right aside:before { /* 右 侧 图 书 白色 三 角形 的 样式 、 位 置 和 颜色 */ 
left:100%; 
border-color:transparent transparent transparent white; 


} 
弹出 层 是 一 个 绝对 定位 的 元 素 ， 它 相对 于 包含 每 本 书 的 内 部 div 定位 。 在 第 6 章 那 
个 弹出 层 的 例子 中 , 我 们 只 把 红色 三 角形 定位 在 弹出 层 的 一 边 (参见 图 6-24 )。 而 在 
这 个 例子 中 ， 我 们 大 幅度 地 改进 了 这 个 效果 ， 弹 出 层 似乎 是 把 边框 给 向 外 挤 出 了 一 
个 尖 尖 的 指针 ， 如 图 7-16 所 示 。 这 个 效果 是 通过 在 橙色 三 角形 上 面倒 加 另外 一 个 更 
小 的 白色 (与 弹出 层 背 景色 相同 ) 的 三 角形 ， 并 将 它们 垂直 的 边 对 齐 实现 的 。 这 样 
就 用 橙色 三 角形 创造 了 边框 的 效果 。 
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图 7-16 节省 空间 的 弹出 层 提 供 每 本 书 的 链接 和 额外 信息 
添加 白色 三 角形 使 用 的 是 : :before 伪 元 素 ， 添 加 橙色 三 角形 使 用 的 是 ::after 伪 元 


R, 而 绝对 定位 和 z-index 属性 则 将 它们 在 弹出 层 边 框 上 精确 地 对 齐 。 这 个 结果 非常 
自然 ， 弹 出 层 及 其 指针 浑然 一 体 。 


7.5 WH 


7.5 


这 个 例子 中 容易 搞 混 的 地 方 是 记 住 哪 个 弹出 层 在 左 ， 哪 个 弹出 层 在 右 。 比 如 ， 左 侧 
两 本 书 的 弹出 层 位 于 它们 封面 的 右 侧 ， 而 这 两 个 弹出 层 的 指针 三 角形 则 位 于 弹出 层 
左 侧 。 右 侧 两 本 书 的 情况 恰好 相反 。 


通过 这 个 例子 ,我 们 又 重 温 了 前 面 提 到 的 自 上 而 下 的 方法 。 前 面 代码 中 的 注释 已 经 
明确 告诉 你 了 ， 首 先是 所 有 弹出 层 共享 的 样式 ,包括 大 小 、 内 边 距 、 边 杠 、 颜 色 和 
内 容 等 样式 。 其 次 是 把 前 两 本 书 的 弹出 层 定 位 在 图 片 右 侧 的 规则 ， 以 及 把 后 两 本 书 
的 弹出 层 定位 在 图 片 左 侧 的 规则 。 随 后 是 所 有 图 书 弹出 层 指针 三 角形 共享 的 样式 。 
再 接着 是 左 侧 两 本 书 弹 出 层 三 角形 的 样式 ， 以 及 右 侧 两 本 书 弹 出 层 三 角形 的 样式 。 








这 种 编码 原则 简称 为 DRY (don'trepeat yourself )， 即 “不 要 重复 自己 ”。 目标 是 让 每 
一 个 效果 最 终 都 有 “独立 且 权 威 的 来 源 ”。 








尽管 一 两 句 话 不 能 解释 清楚 ， 但 这 些 代码 逻辑 上 是 前 后 相继 的 ， 而 且 避 免 了 那 种 每 
个 弹出 层 都 完全 重 写 一 遍 规 则 的 做 法 。 我 想 ， 这 个 例子 很 值得 大 家 花 点 时 间 深 入 研 
究 、 认 真 体 会 。 如 果 能 自己 从 头 写 出 这 个 例子 来 ， 对 理解 其 中 的 奥妙 绝对 是 有 帮助 
的 。 这 种 前 后 相继 的 代码 组 织 技巧 ， 能 够 把 为 多 个 元 素 编码 的 工作 分 解 成 相同 的 部 
分 和 不 同 的 部 分 。 最 重要 的 是 ， 它 能 为 你 自己 和 他 人 将 来 的 维护 工作 提供 方便 。 


好 了 ， 这 个 页 面 就 剩 最 后 的 页 脚 啦 。 

















页 肢 


页 脚 非常 适合 放 一 些 声明 之 类 的 信息 ， 比 如 是 谁 创建 了 这 个 网 站 ， 以 及 一 些 业 务 相 
关 的 链接 ， 比 如 免责 声明 、 服 务 条 款 、 联 系 信 息 、 隐 私 政策 和 版 权 声 明 等 。 下 面 是 
页 脚 的 HTML 标记 。 








«footer» 
<p>A CSS template from «a hrefz"http://www.stylinwithcss.com"»«em»Stylin' 
with CSS, Third Edition«/em»«/a» by Charles Wyke-Smith«/p» 
«nav» 
«ul» 
<li><a href="#">Privacy Policy«/a»«/li» 
<li><a href="#">Contact Charles«/a»«/li» 
«/ul» 
«/nav» 
«/footer» 
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下 面 是 它 的 CSS. 


footer ( 
padding:.5em 0 .35em 0; /* 内 容 上 下 的 间距 */ 
text-align:center; /* 居 中 内 容 */ 
border-radius:10px Opx 10px Opx; 
background:#fff; 
box-shadow:0 12px 8px -9px #555; 
} 

footer p { /* 文 本 行 的 样式 */ 
font-family:'Source Sans Pro'; 
font-weight:400; 
font-size:.85em; 
letter-spacing:-.05em; 
color:i555; 
} 

footer p a ( /* 文 本 行 中 的 链接 */ 
font-family:'Source Sans Pro'; 
font-style:italic; 
font-weight:700; 
font-size:1em; 
color:#4eb8ea; 
text-decoration:none; 
} 

footer p a:hover { 
color:#777; 
} 

footer ul { /* 链 接 列表 */ 
display:inline-block; /* 收 缩 包 围 列表 */ 
margin:4px 0 0; 


footer li { 
list-style-type:none; /# 去 掉 默 认 的 项 目 符号 *#/ 
float:left; /# 让 列表 项 水 平 排列 #*/ 
font-family:"Source Sans Pro"; 
font-weight:400; 
font-size:.85em; 
} 

footer li + lia { 
border-left:1px solid #ccc; /* 链 接 分 隔 线 */ 
} 


7.6 


7.6 小 结 


footer li a ( 
text-decoration:none; /* 去 掉 链 接 默 认 的 下 划 线 */ 
color:#aaa; 
padding:0 5px; /* 链 接 间 距 */ 


footer a:hover { 
color:#777; 








图 7-17 ”包含 一 个 文本 元 素 和 一 个 列表 元 素 的 页 脚 


这 一 块 没 有 什么 新 东西 ,都 是 你 知道 的 。 如 图 7-17 所 示 , 内容 通 过 text-align:center 
居中 对 齐 ， 段 落 及 其 文本 都 继承 了 这 一 设 定 ， 在 footer 内 居中 。 这 个 声明 正常 情况 
下 不 会 让 链接 列表 居中 ， 因 为 列表 项 由 块 级 元 素 构成 ， 默 认 会 与 容器 同 宽 。 不 过 ， 
我 给 ul 设 定 了 display:inline-block, 让 它 收缩 包围 二 元素。 这 样 实际 上 就 相当 于 
为 ul 指定 了 宽度 ， 因 此 text-align:center 对 它 也 会 起 作用 。 记 性 好 的 读者 应 该 知 
道 ， 在 前 面 介绍 菜单 的 时 候 ， 我 们 解释 了 应 用 display:inline-block 之 后 ， 元 素 宽 
度 仍 然 是 可 变 的 。 换 句 话 说 ， 即 使 将 来 再 向 这 个 列表 中 添加 链接 ,或 者 从 中 删除 链 
Bi, 列表 仍然 会 居中 。 最 后 , 再 提醒 你 一 下 ,对 列表 应 用 自动 外 边 距 ( 而 不 对 footer 
应 用 text-align:center )， 同 样 能 让 它 在 页 脚 内 居中 。 








小 结 


整个 页 面 布 局 到 现在 已 经 讲 完 了 ， 本 章 也 该 结束 了 。 相 信 大 家 已 经 会 使 用 第 5 章 的 
结构 化 布局 技术 和 第 6 章 的 界面 组 件 快 速 制作 完整 的 页 面 了 。 


下 一 音 ， 我 们 还 会 以 本 音 的 页 面 为 例 。 虽 然 这 个 页 面 在 本 章 中 是 针对 大 屏幕 显示 央 
创建 的 ， 但 今天 ， 谁 也 不 能 保证 浏览 你 网 页 的 一 定 是 大 屏幕 设备 。 因 此 ， 在 制作 网 
页 时 必须 考虑 各 种 屏幕 大 小 ， 让 页 面 能 够 响应 设备 。 相 信 你 一 定 不 情愿 维护 一 堆 不 
同 布局 大 小 的 页 面 ， 然 后 尝试 根据 设备 屏幕 交付 其 中 的 某 个 版 本 。 没 错 ， 我 们 应 该 
让 页 面 检测 自己 所 处 的 环境 ， 然 后 加 载 相应 的 CSS， 把 标记 变 成 适应 相应 设备 的 样 
式 。 本 书 最 后 一 章 就 来 教 大 家 创建 响应 式 网 站 。 
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今天 的 网 页 布局 必须 能 根据 它 自 己 所 处 的 不 同 环境 作出 响应 。 大 屏幕 上 的 最 佳 体 验 
和 手机 中 的 最 佳 体验 有 着 天 壤 之 别 。 在 大 屏幕 上 ， 可 角 yd d psc ie 错 ， 
但 多 栏 布局 到 了 手机 上 ， 每 一 栏 都 会 罕 得 没 法 看 。 此 时 ， 所 有 内 容 “ 鱼 贯 而 行 ”， 即 
用 一 个 栏 来 组 织 成 了 唯一 可 行 的 方案 。 这 样 ， a 就 可 以 轻 
松 自如 地 滚动 屏幕 来 阅读 了 。 














实际 上 ， 使 用 一 项 叫 媒体 查询 的 CSS 功能 ， 很 容易 检测 出 用 户 设备 的 屏幕 大 小 。 然 
后 ， 据 以 提供 替代 或 额外 的 CSS， 可 针对 相应 屏幕 实现 更 加 优化 的 体验 。 使 用 这 种 
方式 创建 对 设备 有 感知 力 的 网 站 ， 被 称 为 响应 式 设计 。 


本 章 仍 然 以 第 7 章 的 那个 为 桌面 浏览 器 设计 的 页 面 为 基础 ， 向 大 家 依次 展示 在 屏幕 
越 来 越 小 的 设备 上 优化 这 个 页 面 的 全 过 程 。 








虽然 我 们 是 要 修改 浏览 器 版 以 适应 小 屏幕 ,但 实际 上 真正 的 设计 原则 是 “移动 先行 ”。 
推荐 大 家 读 一 读 Luke Wroblewski 的 文章 : http://www.lukew.com/ff/entry. asp2933, 还 
有 A Book Apart 出 版 的 他 的 一 本 书 : Mobile First, 


小 设备 上 的 大 布局 


我 们 在 这 里 以 iPad 和 iPhone 作为 目标 设备 , 但 背后 的 概念 同样 适用 于 其 他 平板 电脑 和 
智能 手机 。 首 先 ， 让 我 们 在 小 屏幕 上 看 一 看 第 7 章 的 页 面 〈 固 定 宽度 980 像 素 布 局 )。 

















X 
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iPad 屏幕 尺寸 是 1024 x 768 像素 ， 由 于 页 面 布局 宽度 为 980 像素 ， 因 而 在 横向 (水 
平 ) 的 时 候 恰好 能 容纳 布局 ( 见 图 8-1 )。 当 把 iPad Xk (EH) 以后， 页面 布局 
就 放 不 开 了 。 


iPad 和 iPhone 屏幕 及 其 界面 组 件 的 大 小 , 详 见 这 里 : http://upstageapp.com/resources。 
























图 8-1 Æ iPad 横 屏 的 时 候 ， 第 7 章 的 网 页 看 起 来 很 舒服 ， 而 且 能 填 满 屏幕 ; 在 iPad 竖 屏 的 
时 候 ， 页 面 看 起 来 小 了 一 号 ， 也 没有 填 满 屏幕 


好 了 ， 再 看 看 通过 iPhone 查看 这 个 页 面 会 怎么 样 ， 见 图 8-2。 








will AT& 

















图 8-2 在 iPhone 横 屏 的 时 候 ， 页 面 能 填 满 屏幕 ， 但 已 经 小 得 几乎 看 不 清文 字 了 ; 在 坚 屏 的 
时 候 ， 页 面 就 更 小 了 


8.2 


82 ”媒体 查询 








如 你 所 见 ，iPad 和 iPhone 会 自动 缩小 页 面 以 填 满 屏幕 ， 但 页 面 布 局 在 iPhone 的 小 屏 
幕 上 根本 没 法 看 。 特 别 是 文字 太 小 了 。 用 户 必 须 通过 扩展 手势 来 放大 页 面 ， 以 便 看 
清文 字 。 只 是 这 样 一 来 ， 每 次 都 只 能 看 到 屏幕 中 的 一 小 块 地 方 。 在 竖 屏 的 时 候 ， 也 
就 是 用 户 自 然而 然 地 把 握手 机 的 情况 下 ， 页 面 还 会 更 小 。 


很 明显 ,一 种 布局 不 能 适应 多 种 屏 医 尺寸 。 我 们 需要 一 种 能 够 检测 屏幕 大 小 的 方法 ， 
然后 相应 地 修改 布局 。 简 言 之 ， 就 是 需要 让 页 面 能 够 自己 响应 屏幕 变化 。 下 面 我 们 
就 来 看 一 看 实现 这 一 点 需要 哪些 技术 。 首 先 就 是 媒体 查询 。 


响应 式 设计 的 要 素 


响应 式 设计 包含 三 个 重要 的 方面 。 














口 媒体 查询 : 是 一 种 CSS 语法 ， 可 以 根据 浏览 器 的 特性 ， 一 般 是 屏幕 或 浏览 器 容器 宽度 提供 
CSS 规则 ; 

口 流 式 布局 : 是 使 用 em 或 百分比 等 相对 单位 设 定 页 面 总 体 宽度 ， 让 布局 能 够 随 屏 幕 大 小 而 
缩放 ; 

口 弹 性 图 片 : 是 使 用 相对 单位 确保 图 片 再 大 也 不 会 超过 其 容器 。 





这 几 个 方面 最 早 是 由 Ethan Marcotte 提出 来 的 ， 发 表 在 2010 年 5 月 份 的 4 List Apat RLE, 


地 址 是 : htip://www.alistapart.com/articles/responsive-web-design, 


媒体 查询 


媒体 查询 是 css 代码 的 容器 ， 其 中 的 CSS 只 在 某 些 条 件 ( 比如 ， 当 前 页 面 要 被 打印 
或 者 要 显示 在 某 种 类 型 或 尺寸 的 屏幕 上 ) 具备 时 才 会 应 用 。 媒 体 查询 可 以 用 两 种 方 
式 来 写 ，@media 规则 和 <link> 标 签 的 media 属性 。 


安 卓 设备 的 屏幕 大 小 千差万别 ， 下 面 这 个 网 页 列 出 了 针对 iOS、 安 卓 和 Windows iX 
备 的 所 有 媒体 查询 :http://pugetworks.com/blog/2011/04/css-media-queries-for-targeting- 


different-mobile-devices/。 
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8.2.1 @media 规 则 


dp 
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第 一 种 方式 是 emedia 规则 ， 可 以 在 样式 表 或 <style> 标 签 的 CSS 中 包含 媒体 查询 ， 
比如 : 


@media print { 
nav ( 
display:none; 


} 


这 条 规则 声明 : 如 果 当 前 页 面 要 打印 ， 那 么 就 不 显示 nav 元 素 。 


大 家 注意 ， 这 里 是 把 CSS 规则 极 套 在 了 一 个 @media 规则 中 ， 乍 一 看 似乎 有 点 不 太 习 
惯 。 尽 管 可 以 把 CSS 规则 恋 套 在 媒体 查询 里 ， 但 媒体 查询 本 身 却 不 能 互相 冬 套 。 下 
面 再 看 一 个 假设 的 示例 (倒是 跟 图 8-1 和 图 8-2 中 的 例子 关系 更 密切 )， 其 中 涉及 最 
大 屏幕 宽度 。 








/# 只 在 屏幕 宽度 不 大 于 568 像素 时 应 用 */ 
@media screen and (max-width:568px) { 
.column (float:none; width:9676; margin:O auto;] 


) 





对 这 个 例子 而 言 ， 如 果 页 面 是 通过 屏幕 显示 ， 而 且 该 屏幕 宽度 不 超过 568 像素 ， 那 
4 CSS 就 会 取消 带 .column 类 的 元 素 的 浮动 , LEK E FEE, 上 且 让 该 元 素 宽 度 
为 屏幕 的 96%， 同 时 在 屏幕 上 居中 。 











iPhone 4 的 屏幕 分 辩 率 为 320 x 480， 而 iPhone 5 的 屏幕 分 辩 率 则 为 320 x 568 ( 至 少 
对 浏览 器 和 媒体 查询 来 说 是 这 么 大 ， 因 为 像素 是 翻 倍 使 用 的 一 一 物理 像素 在 两 个 方 
向 上 都 是 这 里 值 的 两 倍 )。 把 max-width 设 定 为 较 大 的 iPhone 5 屏幕 的 最 大 宽度 ， 可 
以 保证 布局 各 栏 在 所 有 iPhone 中 都 不 再 浮动 ， 而 是 上 下 堆 著 。 








想 知 道 怎 苹果 视网膜 ( retina ) 屏 和 其 他 高 分 辨 窑 屏 上 以 恰当 的 分 状 率 显示 图 片 ? 
可 以 篇 文章 : http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/。 


8.2 ”媒体 查询 


简单 地 理解 ， 就 是 相应 设备 必须 是 一 块 最 大 屏幕 宽度 不 超过 568 像素 的 屏幕 〈 比 如 
浏览 器 或 智能 手机 )。 因 此 ， 这 条 规则 就 不 会 应 用 给 1024 x 768 像素 的 iPad. 


下 面 我 们 再 看 一 看 如 何在 <link> 标 签 的 media 属性 里 写 媒体 查询 。 


谈 谈 媒体 查询 





媒体 类 型 ”最 常用 的 媒体 类 型 如 下 所 示 。 


口 a11: 匹配 所 有 设备 ; 

D handled: 匹配 手持 设备 (小 屏幕 、 单 色 、 带 宽 有 限 ) ; 

D print: 匹配 分 页 媒体 或 打印 预览 模式 下 的 屏幕 ; 

D screen: 匹配 彩色 计算 机 屏幕 ; 

口 其 他 媒体 类 型 还 有 braille (盲文 点 字 触 觉 反馈 设备 ) embossed ( 盲文 分 页 打印 机 ) ~ 
projection (投影 仪 ) speech (语音 合成 器 ) 、tty (电话 机 屏幕 等 固定 宽度 字符 栅 格 
设备 ) 和 tv (电视 机 ) 。 





要 想 详 细 了 解 这 些 媒体 类 型 ， 请 参考 CSS 2.1 标 准 : htip://www.w3.org/TR/CSS2/media.html。 


当然 ， 任 意 时 刻 浏览 器 窗口 中 只 能 使 用 一 种 媒体 类 型 。 媒 体 类 型 从 IE6 开始 就 得 到 支持 了 ,但 
媒体 特性 到 IE9 以 上 才 得 到 支持 。 一 般 来 说 这 并 不 是 问题 ， 因 为 我 们 使 用 媒体 特性 多 数 情 况 下 
都 是 为 了 检测 平板 电脑 或 智能 手机 等 现代 设备 。 


媒体 特性 媒体 特性 也 就 是 媒体 某 一 方面 的 特征 ,一般 带 有 min- 或 max- 前 级 。 最 常用 的 媒体 
特性 如 下 。 


min-device-width 和 max-device-width: 匹配 设备 屏幕 的 尺寸 ; 
min-width 和 max-width: 匹配 视 口 的 宽度 ， 例 如 浏览 器 窗口 宽度 ; 
orientation( 值 为 portrait 40 landscape) : 匹配 设备 是 横 屏 还 是 竖 屏 。 


如 果 想 通过 媒体 查询 来 根据 用 户 对 浏览 器 窗口 的 缩放 重新 调整 布局 ， 应 该 使 用 min-width 和 
max-width. 要 了 解 所 有 媒体 特性 , 请 参考 CSS3 标准 : http://www.w3.org/TR/css3-mediaqueries/ 


#medial。 


可 以 使 用 逻辑 运算 符 and, not, or RXR all, only 组 合 媒体 类 型 和 媒体 特性 。 
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其 中 ，only 关键 字 可 以 用 来 对 不 支持 媒体 查询 的 浏览 器 隐藏 样式 表 。 关 于 媒体 查询 中 可 以 使 
用 的 逻辑 运算 符 的 详细 信息 ， 请 参考 这 里 : https://developer.mozilla. org/en-US/docs/CSS/ 
Media_queries#Operator_precedence。 


这 里 有 一 篇 关于 媒体 查询 的 扫盲 文章 ， 非 常 不 错 : htip://www.iavascriptkit.com/dhtmltutors/ 
cssmediaqueries.shiml。 至 于 要 在 IE8 及 以 下 版 本 的 IE 浏览 器 中 使 用 媒体 查询 ， 可 以 使 用 腻子 
脚本 Respond.is〈 参 见 本 书 附 录 未 尾 的 “腻子 脚本 ”) 。 


8.2.2 <link> 标 签 的 media 属 性 


» 


如 果 要 通过 媒体 查询 应 用 的 CSS 规则 非常 多 ， 那 么 就 可 以 考虑 使 用 <link> 标 签 的 
media 属性 设 定 条 件 ， 有 选择 地 加 载 独立 的 样式 表 。 你 不 会 不 知道 吧 ， 我 们 前 面 一 直 
都 是 在 使 用 <link> 标 签 向 HTML 中 链接 样式 表 的 。 嗯 ,这 个 你 应 该 知道 。 不 过 , 你 未 

必 知 道 的 是 , 通过 在 <link> 标 签 的 media 属性 中 指定 条 件 , 可 以 有 选择 地 加 载 样式 表 。 














下 面 这 个 例子 在 前 面 介 绍 @emedia 规则 时 展示 过 ， 但 这 次 我 们 使 用 的 是 <link> 标 签 的 
media 属性 。 








«link type="text/css" media-"print" href="css/print styles.css" /> 
«link type-"text/css" media-"screen and (max-width:568px)" 
href-"css/iphone styles.css" /» 


结果 都 一 样 ， 即 这 里 的 CSS 样式 表 会 根据 media 属性 中 的 指定 的 条 件 应 用 。 而 且 ， 

查看 页 面 的 如 果 是 大 显示 器 或 iPad， "pu d ates 个 样 
式 表 。 第 二 个 样式 表 只 会 被 查看 该 页 面 的 智能 手机 加 载 。 那 怎么 使 用 媒体 查询 最 直 
观 呢 ? 最 直观 的 方式 莫 过 于 根据 不 同 的 断 点 来 编写 媒体 查询 。 














要 适 配 不 同 的 设备 ,推荐 Andy Clarke 的 320 and Up 样板 包 : http://stuffandnonsense.co.uk/ 
projects/320andup/。 


8.2.3 WA 
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断 点 (breakpoint ) 在 这 里 指 的 是 媒体 查询 起 作用 的 屏幕 宽度 , 其 写法 类 似 如 下 形式 。 


@media screen and (max-width:640px) { /*CSS 规则 */ } 


d» 


8.2 ”媒体 查询 


在 这 里 ， 断 点 是 640 像素 宽 。 如 果 有 设备 的 屏幕 宽度 等 于 或 小 于 断 点 设 定 的 宽度 ， 
那么 后 面 的 CSS 就 会 起 作用 。 


可 能 有 人 会 使 用 断 点 去 匹配 特定 设备 的 屏幕 宽度 ， 但 我 认为 最 重要 的 ， 还 是 在 屏幕 
变 小 的 情况 下 ， 通 过 简化 布局 来 确保 可 用 性 。 换 句 话 说 ,不 要 简单 地 用 断 点 去 匹配 
设备 宽度 ， 而 是 可 以 从 慢 慢 地 缩小 浏览 器 窗口 开始 ， 在 发 现 当前 布局 不 合适 的 时 候 
再 确定 断 点 ， 然 后 编写 新 样式 。 不 要 针对 某 款 具 体 的 设备 ， 而 要 为 宽度 在 某 个 范围 
内 的 屏幕 提供 替代 的 布局 ， 该 布局 对 于 范围 内 的 设备 都 应 该 适用 。 














我 在 发 现 一 个 可 以 作为 断 点 的 布局 宽度 时 ， 通 过 查看 我 的 电脑 上 安装 的 Ambrosia 
Software 的 截屏 软件 SnapzPro X 所 显示 的 大 小 ， 就 可 以 知道 布局 的 像素 宽度 。 








通过 缩小 浏览 器 窗口 ， 能 够 直观 地 感受 到 当前 布局 在 小 屏幕 上 的 效果 。 不 过 ， 弓 良 
置疑 , 必须 还 要 在 小 屏幕 设备 上 进行 测试 。 平 板 电脑 与 小 显示 器 尺寸 接近 , 因此 1000 
像素 的 断 点 〈 为 屏幕 小 于 等 于 1000 像素 的 设备 提供 样式 ) 适合 平板 电脑 。 在 这 样 做 
之 前 ,我 们 先 讲 一 讲 怎么 取消 iPhone 和 iPad 中 “缩小 适应 ”的 默认 行为 。 





8.2.4 用 <meta> 标 签 设 定 视 口 


S 
g 


2 


从 图 8-1 和 图 8-2 可 以 看 出 , iPad 和 iPhone 会 把 适合 大 屏幕 的 网 页 缩小 , 以 便 在 它们 
较 小 的 屏幕 上 能 看 到 网 页 的 全 貌 。 这 是 一 个 通用 技巧 , 但 对 于 手机 一 一 特别 是 iPhone 
来 说 ， 由 于 文字 实在 太 小 了 ,为 了 看 清楚 网 页 内 容 ， 肯 定 得 用 扩展 手势 放大 页 面 ， 
然后 再 来 来 回回 地 扫 屏 。 如 果 你 想 让 自己 的 页 面 布局 适合 这 些小 屏幕 ， 首 先 就 要 覆 
盖 这 种 自动 缩小 的 设 定 。 方 法 是 在 页 面 的 <head> 标 签 里 添加 一 个 <meta> 标 签 : 








«meta name-"viewport" content-"width-device-width; maximumscale-1.0" /> 

这 个 <meta> 标 签 告诉 浏览 器 按照 屏幕 宽度 来 显示 网 页 ， 不 要 缩小 网 页 。 虽 然 这 样 可 
以 让 布局 以 实际 宽度 显示 ,但 在 iOS 设备 (如 iPad fll iPhone ) 中 却 会 引发 一 个 已 知 
的 bug。 关 于 这 个 bug 及 如 何 解 决 ， 本 章 后 面 再 交待 。 








关于 <meta> 标 签 ， 其 实 还 有 很 多 内 容 值得 深究 ， 详 细 情 况 请 参考 这 里 吧 : http:// 
developer.android.com/guide/webapps/targeting.html 
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第 7 章 的 网 页 (或 布局 ) 目前 是 固定 的 980 像素 宽 ， 而 且 在 比 980 像素 更 宽 的 浏览 
器 窗口 内 会 居中 。 随 着 浏览 器 窗 口 变 罕 ， PADA Te OL E E 
布局 的 右边 会 被 浏览 器 窗口 切 掉 。 为 此 ， PUE 一 个 断 点 应 该 设 定 在 布局 的 固定 宽 
度 之 上 ， 即 1000 像素 。 如 果 浏 览 器 窗口 变 得 比 这 个 断 点 还 要 罕 ， 那 么 我 希望 布局 能 
Sp DCN e EE 浏览 器 窗口 。 回 忆 一 下 ， 这 个 网 页 
布局 中 的 所 有 结构 化 元 素 , 使 用 的 都 是 auto 或 者 百分比 宽度 值 ， 因 此 从 固定 到 流动 
的 转换 很 简单 ， 只 要 把 固定 宽度 的 外 包装 元 素 设 为 百分比 宽度 就 行 了 。 


ZG95 百分比 宽度 体现 了 响应 式 设计 的 第 二 个 要 素 








流动 布局 。 





/*98% 可 以 保证 两 边 有 一 点 边 距 */ 
#wrapper {width:98%;} 


过 ， 布 局 变 成 流动 之 后 会 出 现 几 个 问题 。 




















图 8-3 在 iPad 竖 屏 状态 下 ， 布 局 中 的 区 块 交 旱 到 了 一 起 
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如 图 8-3 所 示 ， 随 着 布局 宽度 变 罕 一 一 这 里 是 在 iPad "pE, BI 768 像素 宽度 的 情况 
下 ， 导 航 菜单 已 经 压 在 了 其 左 侧 的 页 面 标题 上 面 。 而 中 间 的 登录 表单 和 博文 链接 也 
都 盖 住 了 部 分 博文 内 容 。 显 然 ， 菜单 的 定位 方式 及 页 眉 下 方 的 两 栏 布局 不 适合 这 么 
FZ IRI DERE o 


那 好 ， 这 就 是 我 们 在 1000 像素 断 点 中 需要 解决 的 问题 。 还 是 先 来 看 一 看 断 点 中 的 
CSS 规则 ， 之 后 再 听 我 解释 。 





Gmedia only screen and (max-width:1000px) { /*1000 像素 的 断 点 #/ 
body { 
margin:0 8px 20px; /* 添 加 右 外 边 距 ， 以 防 滚动 条 碍 事 儿 */ 
} 
#wrapper {width:98%;} /* 布 局 由 固定 变 成 流动 */ 
header { 
height:100px; /* 增 加 页 届 高 度 ， 为 重新 定位 菜单 留 出 空间 */ 
padding:1px 0 0 0; /* 防 止 导 航 菜 单 的 上 外 边 距 登 加 */ 
} 
header nav.menu { 
margin-top:65px; /# 把 菜单 移动 到 页 面 标题 和 搜索 框 下 方 */ 
j 
sectionitfeature area ([padding-bottom:0;) /* 用 不 着 了 */ 
section#feature area article ( /* 让 博文 摘要 部 分 与 布局 同 宽 */ 
float:none; /* 不 需要 浮动 了 */ 
width:auto;/* 自 动 填 满 布 局 */ 
} 
section#feature_area aside ( /# 原 来 的 右 栏 同样 与 布局 同 宽 #/ 
float:none; 
width:auto; 
} 
section#feature area aside form { 
float:left; /* 浮 动 到 左 侧 */ 
margin:15px 0 0 0; /*5 nav 的 上 外 边 距 一 致 */ 
} 
section#feature area aside nav { 
width:17em; /* 缩 小 博文 链接 区 的 宽度 */ 
} 
} /*1000 像素 断 点 结束 */ 


E 8-4 展示 了 应 用 以 上 断 点 规则 后 ， 通 过 iPad 坚 屏 模式 浏览 页 面 会 看 到 不 一 样 的 效 
果 。iPad 横 屏 时 的 宽度 大 于 1000 像素 ， 因 此 不 会 应 用 以 上 规则 ， 仍 然 是 图 8-1 中 的 
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样子 ， 而 在 竖 屏 时 由 于 宽度 小 于 1000 像素 ， 所 以 就 会 得 到 新 的 流动 布局 。 





如 图 8-4 所 示 ， 通 过 媒体 查询 应 用 新 规则 之 后 ， 页 由 高 度 和 菜单 上 外 边 距 都 增加 了 。 
这 些 变化 让 菜单 移 到 了 页 悄 底 部 新 增 的 空间 ， 它 现在 位 于 标题 和 搜索 框 之 下 了 。 




















图 8-4” 当 布局 窗口 变 得 小 于 1000 像素 之 后 ， 就 会 应 用 媒体 查询 中 的 CSS 规则 。 菜 单 移 到 下 方 ， 
而 原来 右 栏 的 元 素 重新 定位 到 了 左 栏 下 方 

feature area 也 不 一 样 了 , 它 的 两 个 子 元 素 一 一 包含 博文 摘要 的 article 和 包含 登录 
表单 及 博文 链接 的 aside 被 取消 了 浮动 并 将 宽度 重 设 为 auto。 它 们 由 左右 并 列 变 成 
TETES, 并 分 别 填 满 布 局 宽度 。 在 aside 内 部 , 表单 向 左 浮动 , 因而 form 和 nav 
并 列 在 一 起 ， 共 同位 于 article 元 素 下 方 (nav 本 来 就 是 向 右 浮 动 的 )。 另 外， 为 了 
在 布局 宽度 缩小 到 下 一 个 断 点 〈640 像素 ) 之 前 , 不 让 nav 元 素 碰 到 表单 的 右边 , 我 
们 还 把 nav 元 素 稍微 设 定 得 窗 了 一 些 。( 下 一 个 断 点 的 情况 稍 后 介绍 。) 


此 时 , 还 不 需要 对 book area 写 什 么 新 样式 , 因为 一 开始 我 们 就 给 每 本 书 的 容器 都 设 
ET 25% 的 宽度 ， 并 没有 设 定 固定 的 宽度 。 所 以 ， 这 些 图 书 封 面 及 各 自 相 应 的 文字 
只 会 随 着 布局 变 罕 而 靠 得 更 近 。 


84 ”针对 智能 手机 优化 布局 





在 iPad 或 其 他 窗口 宽度 小 于 1000 像素 的 非 移动 浏览 器 中 , 这 种 布局 会 给 人 更 好 的 阅 
读 体验 。 好 啦 ， 接 下 来 再 看 一 看 如 果 布局 宽度 进一步 变 罕 又 会 如 何 。 


针对 智能 手机 优化 布局 


可 是 , 这 种 改进 的 效果 只 能 在 一 定 范围 内 保持 。 如 果 布 局 宽度 到 了 640 BRAF GA 
到 智能 手机 屏幕 的 宽度 ), 那么 第 二 行 的 form 和 nav 接触 , 而 它们 下 面 的 图 书 封面 也 





我 们 需要 在 这 个 宽度 上 增加 一 个 断 点 。 


Gmedia only screen and (max-width:640px) ( 
header ([height:100px;] 
header nav.menu (width:9426; font-size:.65em; } /* 水 平 间 距 更 多 了 */ 
section#book area article { /* 博 文摘 要 */ 
width:auto; 
float:none; 
margin:0; padding:0; /* 每 本 书 的 容器 都 与 布局 同 宽 */ 
} 
section#feature area aside form, 
section#feature area aside nav { /* 博 文 链接 */ 
margin:10px auto; /* 添 加 上 、 下 外 边 距 */ 
float:none; 
} 
/* 图 片 容器 与 布局 同 宽 */ 
section#book area article .inner {width:98%; margin:0 0 0 5px; } 
#book area „inner h3 { /* 取 消 文 本 旋转 效果 */ 
-webkit-transform:none; 
-moz-transform:none; 
-moz-transform-origin:none; 
-ms-transform-origin:none; 
transform:none; 
position:static; 
} 
#book_area article img ( /* 相 对 设备 宽度 确定 图 片 宽度 */ 
width:40%; 
} 


section#book area {background:#fff; padding: 0 10px 10px; margin:0 0 10px;} 
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#book area article aside ( /# 在 图 片 旁 边 显示 弹出 层 #/ 
display:block; 
position:static; 
float:right; 
margin:0; padding:O O 20px 0; 
font-size: .8em; 
border:none; 
width:55%; 
box-shadow:none; 


} 
section#book area article aside::before，/* 隐 藏 弹出 层 的 三 角 */ 
section#book area article aside::after { 

display:none; 


} 


640 像素 的 断 点 比 1000 像素 的 断 点 作出 了 更 多 改变 。 首 先 ， 此 前 并 排 的 form 和 nav 
元 素 被 取消 浮动 ， 变 成 与 布局 同 宽 ， 因 而 上 下 堆 蔷 起 来 。 其 次 ,包含 图 书 封 面 的 容 
器 ， 也 由 原来 并 列 的 一 行 ， 变 成 了 现在 的 上 下 堆 乔 。 此 时 ， 图 书 封面 旁边 的 标题 文 
字 也 没有 必要 再 旋转 了 ， 它 们 在 HTML 标记 里 原本 就 在 图 片 前 面 ， 只 要 去 掉 对 文本 
的 旋转 声明 ， 这 些 标题 就 会 按照 各 自 默认 的 static 定位 方式 ， 自 然 地 领衔 每 本 书 。 
弹出 层 也 变 得 不 再 必要 ， 因 此 要 取消 隐藏 它们 的 声明 及 相关 样式 ， 把 它们 定位 到 每 
本 书 的 旁边 。 以 上 这 些 改变 得 到 了 一 个 单 栏 、 序 列 化 的 布局 ， 非 常 适合 智能 手机 。 
目前 来 看 ， 页 面 中 所 有 主要 的 元 素 都 与 布局 同 宽 ， 而 且 相 互 堆 和 琶 在 一 起 。 

如 图 8-5 和 图 8-6 所 示 , 我们 还 把 图 片 宽 度 设 定 为 4096 , 确保 它们 不 可 能 比 布局 更 宽 。 


这 个 例子 中 使 用 的 图 片 比较 小 ， 假 如 你 使 用 的 图 片 在 小 屏幕 设备 上 比 它们 的 容器 还 
要 宽 ， 那 么 就 需要 在 样式 表 中 包含 下 面 这 条 规则 : 




















img {max-width:100%;} 








3x Z MILII nT UR poc Ee E ae REENA, 同时 也 不 会 影响 它们 缩小 。 
这 条 规则 体现 了 响应 式 设计 的 第 三 个 要 素 : 弹性 图 片 。 





布局 中 所 有 推倒 元 素 的 宽度 都 是 用 相对 于 浏览 器 窗口 的 百分比 设 定 的 ， 因 此 当 设备 
在 横 屏 和 竖 屏 间 切 换 时 ， 布 局 元 素 能 够 从 容 地 重新 排放 。 
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&j8-5 单 栏 横 屏 布局 在 iPhone (和 iPad) 中 图 8-6， 竖 屏 时 只 有 页 眉 显 得 太 大 了 
效果 不 错 


-273 - 


第 8 章 ”响应 式 设计 


针对 坚 屏 进一步 优化 


-274 - 


如 图 8-6 所 示 ， iPhone 竖 屏 时 的 页 眉 存 在 两 个 问题 。 一 是 菜单 折 行 , 二 是 搜索 框 压 住 
了 标题 。 这 两 个 问题 都 很 容易 解决 , 为 此 我 们 要 专门 为 iPhone 竖 屏 再 添加 一 个 断 点 。 
虽然 可 以 在 媒体 查询 中 使 用 portrait 关键 字 , 但 我 不 想 让 iPad 竖 屏 也 应 用 这 些 样式 。 
所 以 , 这 个 断 点 依旧 使 用 像素 宽度 ， 即 将 max-width 设 定 为 320 像素 ,也 就 是 iPhone 
竖 屏 时 的 屏幕 宽度 。 








@media only screen and (max-width:320px) ( /*iPhone 坚 屏 */ 
header [height:90px;] /* 缩 小 页 届 高 度 */ 
header section#title h1 {font-size:1.25em;} /* 文 本 再 小 一 点 */ 
header section#title h2 (font-size:.75em;) /* 文 本 再 小 一 点 */ 
header form.search {top:6px; right:2px;) /* 搜 索 框 上 移 */ 
/* 按 比例 缩小 ， 并 上 移 菜单 */ 
header nav.menu {font-size:.55em; margin-top:55px;} 
nav.menu ul lia í( 
padding:5px 4px; /* 增 大 链接 ， 方 便 点 击 */ 
margin:0; 
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图 8-7 在 iPhone 竖 屏 的 320 像素 宽度 下 ， 布 局 也 非常 漂亮 了 


8.5 ”最 后 两 个 问题 


如 图 8-7 所 示 ， 以 上 CSS 减少 了 页 丑 高 度 ， 把 搜索 框 移 到 了 右上 角 。 通 过 设 定 较 小 
的 相对 字体 大 小 ， 荣 单 也 更 小 了 ， 因 为 菜单 大 小 完全 由 链接 的 文本 大 小 和 围绕 文本 
的 内 边 距 决定 。 既 然 链 接 文本 和 菜单 元 素 变 小 了 ， 那 就 可 以 把 页 眉 的 垂直 高 度 再 减 
少 一 点 ， 腾 出 一 点 宝贵 的 空间 。 








现在 ， 上 至 宽屏 显示 融 ， 下 至 竖 屏 智能 手机 ， 都 能 获得 最 佳 用 户 体验 了 。 不 过 ， 要 
完成 我 们 的 响应 式 设 计 ， 还 有 一 些 细节 问题 要 解决 。 


8.5 ”最 后 两 个 问题 


还 有 最 后 两 个 问题 需要 解决 。 一 个 是 有 详细 文档 说 明 的 iOS (苹果 移动 操作 系统 ) 设 
备 上 的 重 绘 和 缩放 的 bug， 男 一 个 是 让 下 拉 菜 单 也 支持 触摸。 


8.5.1 ”移动 Safari 中 的 缩放 bug 


Safari Mobile ( iPhone 浏览 器 ) 中 有 一 个 bug， 在 设备 从 竖 屏 旋转 到 横 屏 时 会 导致 缩 
放 和 重 绘 问 题 ， 如 图 8-8 所 示 。 


enim urna, eu adipi scing diam pharetr: eu adipiscing 
————————— Sim. Nam laoreet 
aecenas pharetra 
Email tas eu adipiscing 
iac. 





Password 





» 





8-8 在 从 竖 屏 旋转 到 横 屏 时 ，WebKit 中 的 bug 会 导致 屏幕 重 绘 





有 一 个 JavaScript 脚本 可 以 解决 这 个 重 绘 问 题 ， 我 已 经 把 它 包 含 在 完成 后 的 HTML 
示例 文件 中 了 。 要 了 人 解 关于 这 个 bug 的 更 多 信息 , 请 参考 这 里 : http://webdesignerwall. 
com/tutorials/iphone-safari-viewport-scaling-bug. 访问 这 里 下 载 脚本 : https://gist.github. 
com/901295, 
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8.5.2 ”让 下 拉 荣 单 支持 触摸 
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最 后 ， 还 有 一 个 问题 要 解决 。 那 就 是 让 下 拉 菜 单 支持 触摸 操作 。 还 记得 吗 ， 上 一 章 ， 
我 们 组 合 使 用 了 opacity 和 visibility 属性 ， 实 现 了 下 拉 菜 单 淡 入 淡出 的 效果 。 当 
时 使 用 的 CSS 如 下 。 


nav.menu li ul { /* 隐 藏 下 拉 菜 单 */ 
opacity:0; visibility:hidden; 
-webkit-transition:1s all; /# 同 时 过 渡 opacity fe visibility 属性 */ 
-moz-transition:1s all; 
transition:1s all; 


} 

[* USER RE SERT ARX X*/ 

nav.menu li:hover ul {opacity:1; visibility:visible;] 

REF, S BRUDER zb hover 规则 中 对 visibility 属性 的 过 渡 。 似 乎 也 
不 算 太 意外 ， 毕 竟 这 个 属性 只 是 简单 地 切换 了 一 个 布尔 值 的 状态 ， 从 而 实现 显示 和 
隐藏 ,但 这 也 说 明 visibility 属性 不 是 过 渡 动 画 的 理想 对 象 。 除 非 我 去 掉 visibility 
属性 ， 否 则 菜单 在 触摸 屏 上 没 法 用 。 可 是 如 果真 这 样 做 ， 在 非 触 摸 屏 上 只 要 鼠标 经 
过 菜单 下 方 ， 就 会 导致 下 拉 菜 单 显示 出 来 。 因 为 下 拉 羔 单 虽 然 处 于 完全 透明 状态 ， 
但 它 对 鼠标 还 是 “可 见 的 "。 解 决 方案 是 使 用 Modernizr 检测 设备 是 否 支 持 触 摸 ， 如 
果 支 持 再 去 掉 对 visibility 属性 的 过 渡 。 如 果 设 备 支持 触 找 ， Modernizr 会 给 根 元 素 
html 添加 一 个 touch 类 ， 我 们 就 可 以 针对 触摸 设备 单 写 一 条 规则 : 





关于 使 用 Modernizr, 这 里 有 一 篇 非常 精彩 的 文章 :http://webdesignernotebook.com/css/ 


how-to-use-modernizr/ 。 


/*Modernizr 检测 到 和 触 屏 ， 再 去 掉 妨 三 菜 单 过 渡 的 visibility 属性 */ 
.touch nav.menu li ul { 

-webkit-transition:1s opacity; 

-moz-transition:1s opacity; 

transition:1s opacity; 


条 规则 对 不 支持 触摸 的 ) 非 移动 设备 是 不 适用 的 。 在 触摸 设备 上 ， 有 了 它 用 户 
du x ， 下 拉 菜 单 就 会 显示 出 来 。 不 过 ， 当 用 户 再 触摸 别 的 地 方 时 ， 


8.5 ”最 后 两 个 问题 


菜单 会 立即 消失 ， 而 不 是 淡出 屏幕 。 实 际 上 ， 淡 出 效果 的 唯一 好 处 ， 就 是 当 用 户 鼠 
标 意外 离开 时 ， 再 移 回 去 还 能 把 菜单 “召回 ”。 因 此 ， 在 不 使 用 鼠标 的 触摸 设备 上 ， 
这 种 “突然 消失 ”的 效果 还 是 可 以 接受 的 。 








请 大 家 注意 ， 这 个 菜单 只 有 在 触摸 屏幕 其 他 地 方 的 时 候 才 会 消失 。 因 为 触摸 其 他 地 
会 触发 收缩 bug 的 代码 (上 一 节 介 绍 过 )， 强 迫 JavaScript 运行 ， 这 样 就 足以 让 菜 

意识 到 当前 已 经 不 再 是 悬 停 状态 而 关闭 了 。 另 一 个 实现 这 种 “触摸 其 他 地 方 关闭 ” 
效果 的 方法 是 执行 某 个 JavaScript KZ ELA, 下 面 就 是 执行 jQuery 的 noop PR C 英 
X noop 的 意思 是 “无 操作 ”) 的 例子 。 虽 然 这 个 函数 什么 也 不 做 ， 但 只 要 通过 触摸 
屏幕 其 他 地 方 来 调用 它 ， 就 可 以 关闭 菜单 了 。 


(function(){ $(window).on('touchstart',$.noop); })(); 
当然 ， 这 完全 是 一 种 对 付 的 手段 。 不 过 ，JavaScript 专家 Isaac Shapira ( 他 告诉 我 的 


这 个 技巧 ) 跟 我 说 :“ 这 是 一 种 优雅 的 对 付 。” 假 如 你 不 需要 修复 缩放 bug, 那么 只 要 
加 上 这 行 代 码 就 可 以 关闭 菜单 了 。 
要 是 你 连 jQuery 都 不 想 用 ， 可 以 只 在 <body> 标 签 上 添加 ontouchstart=""。 这 样 也 
会 在 用 户 触摸 屏幕 其 他 地 方 时 触发 JavaScript 运行， 从 而 关闭 菜单 。 


博客 圈 里 一 直 都 在 热烈 地 讨论 怎么 让 触摸 设备 支持 下 拉 菜 单 。 我 给 大 家 提供 这 人 么 一 
个 链接 ， 大 家 有 空 可 以 看 一 看 ， 里 面 有 一 个 试验 性 的 例子 : http:/css-tricks.com/ 


convert-menu-to-dropdown。 





我 是 在 写 这 本 书 的 时 候 ， 才 最 终 找 到 这 个 让 下 拉 菜 单 既 能 在 鼠标 设备 又 能 在 触摸 设 
备 上 使 用 的 方法 。 这 个 方法 并 不 完美 ， 我 还 会 继续 完善 它 。 因 此 ， 请 大 家 有 空 就 到 
我 的 博客 上 瞧 瞧 ， 没 准 儿 我 又 找到 了 更 可 靠 的 办 法 ， 或 者 又 发 现 了 其 他 问题 。 不 过 ， 
当前 这 个 方法 在 iPad 和 iPhone， 以 及 有 限 几 球 Android 设备 上 都 没 问题 ， 我 都 测试 
Bis 











好 吧 ， 就 这 样 了 。 我 们 这 个 几乎 能 在 任何 设备 上 恰当 展示 的 网 页 已 经 可 以 告 一 段落 
了 。 随 着 移动 设备 在 人 们 工作 生活 中 扮演 的 角色 越 来 越 重要 ( 越 来 越 多 的 互联 网 流 
量 来 自 移动 设备 )， 开 发 响应 式 网 站 也 只 会 越 来 越 重 要 。 
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8.6 小结 


这 个 练习 结束 了 本 章 ， 同 时 也 结束 了 这 本 书 。 本 章 ， 我 们 看 到 了 如 何在 响应 式 设计 
中 运用 媒体 查询 、 流 动 布 局 和 弹性 图 片 ， 让 同样 的 网 页 能 够 适应 不 同 屏 幕 大 小 的 设 
备 。 对 于 实现 啊 应 式 设 计 中 的 一 系列 问题 ， 我 没有 完美 的 方案 ， 而 且 任 何人 也 不 会 
有 。 因 为 响应 式 设 计 是 当前 最 新 的 Web 设计 思想 ， 而 技术 、 浏 览 器 和 硬件 都 在 迅速 
发 展 变化 之 中 。 


CSS, 特别 是 CSS3 本 身 ， 就 有 许 许多 多 可 能 的 发 展 方向 ， 这 些 方向 的 进度 又 快慢 不 
一 。 因 此 ， 学 习 使 用 CSS 万 万 等 不 得 。 你 要 做 的 就 是 立马 一 头 扎 进去 ， 只 要 知道 什 
么 能 用 ， 什 么 暂时 还 不 能 用 ， 然 后 为 将 来 的 变化 提前 作 好 准备 就 行 啦 。 很 明显 ， 随 
着 HIML5 和 CSS3 日益 普及 并 支持 更 多 类 似 原生 应 用 的 能 力 ，Web 必 将 发 展 到 一 个 
绒 新 的 阶段 。 我 表 心 希望 这 本 小 书 能 为 你 打开 一 扇 门 ， 让 你 看 到 各 种 可 能 性 ， 激 发 
你 产生 伟大 的 想法 ， 并 能 够 把 它们 变 成 现实 。 
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附录 
Bub bàn 


编写 CSS 


CSS 是 HTML 的 排版 语言 。 本 书 几 乎 所 有 例子 都 是 从 HTML 代码 块 开始 的 ,然后 才 
是 CSS 代码 。HTML 代码 类 似 如 下 所 示 。 


<p>A HTML paragraph element«/p» 


浏览 器 忽略 HTML 代码 中 的 空格 符 、 回 车 符 和 制 表 符 ， 但 保留 文本 之 间 的 空白 一 一 
多 个 空白 符 只 保留 一 个 。 举 个 例子 ， 下 面 这 几 行 全 都 是 等 价 的 HTML 代码 ， 它 们 的 
结果 都 是 显示 : An HTML paragraph element。 








<p>An HTML paragraph element«/p» 
«p»A HTML paragraph element«/p» 
«p» 

An HTML paragraph element 

«/p» 

CSS 代码 类 似 如 下 所 示 。 

p {color:red;} 


浏览 带 也 会 忽略 CSS 中 的 空格 符 、 制 表 符 和 回 车 符 , 因此 下 面 这 几 种 写法 都 是 等 价 的 : 
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p (color:red;font-size:20px;line-height:1.2;] 
p (color: red; font-size: 20px; line-height: 1.2; } 
pt 


color: red; 

font-size: 20px; 

line-height: 1.2; 
} 
前 两 个 例子 展示 了 写 在 一 行 中 的 包含 多 个 声明 的 CSS 规则 ( 第 二 个 例子 只 不 过 多 了 
几 个 空格 而 已 )。 第 三 个 例子 展示 了 每 个 声明 各 占 一 行 的 写法 。 但 这 三 个 例子 的 效果 
完全 相同 。 在 编写 CSS 时 , 我 会 混用 这 些 写法 ( 多 个 声明 一 行 , 一 个 声明 一 行 都 有 )。 
另外 ， 虽 然 一 条 规则 中 的 声明 可 以 按照 任何 顺序 写 出 来 ， 但 我 背后 还 是 有 一 个 优先 
级 顺序 : 





display 及 相关 声明 ; 
position 及 相关 的 声明 ; 
.margin、padding 和 border 及 相关 声明 ; 
字体 /文本 相关 声明 ; 

. 装饰 相关 声明 。 

比如 : 


WWD 


.demo { 
display:block; position:absolute; 
height:100px; width:300px; left:10px; top:10px; 
margin:O 5px; padding:10px; 
font-size:10px; line-height:1.2; 
background-color:fteee; border:1px solid; border-radius:6px; 


) 


这 个 顺序 首先 考虑 了 我 认为 对 元 素 最 重要 的 信息 ， 即 它们 怎么 在 页 面 上 定位 ， 定 位 
到 哪里 。 随 后 是 不 那么 重要 的 信息 ， 包 括 元 素 的 视觉 装饰 。 有 时 候 ， 我 也 会 根据 需 
要 改变 这 个 顺序 。 比 如 ， 要 是 margin 声明 在 相应 规则 里 最 重要 ， 就 把 该 声明 写 在 最 
前 头 。 我 认为 把 相关 性 强 的 几 条 声明 都 写 在 一 行 是 一 个 不 错 的 考虑 ， 因 为 把 所 有 声 
明 都 写 在 一 行 , 会 导致 CSS 代码 难以 理解 ,而 每 个 声明 各 占 一 行 又 会 让 样式 表 过 长 ， 
有 时 候 需要 来 回 滚动 着 看 。 当 然 ， 这 完全 是 个 人 喜好 问题 ,“ 仁 者 见 仁 ， 智 者 见 智 ”。 
在 本 书 里 面 ， 上 述 几 种 写法 同时 存在 ， 有 时 候 是 为 了 适应 空格 问题 ， 有 时 候 是 为 了 
便于 添加 注释 。 
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不 过 , 无论 如 何 ， 我 都 向 大 家 强烈 推荐 一 种 组 织 CSS 的 方法 ， 那 就 是 在 样式 表 中 按 
照 接受 样式 的 HTML 标记 出 现 的 先后 顺序 ,依次 列 出 相应 的 CSS 规则 。 千 万 不 能 把 
新 样式 全 都 扔 到 样式 表 最 后 去 。 你 可 以 找 一 个 比较 长 的 样式 表 ， 比 如 本 书 第 6 EK 
单 的 样式 表 ， 会 发 现 其 中 的 CSS 规则 与 表单 的 标记 顺序 完全 一 致 。CSS 样式 表 有 时 
候 一 写 就 会 非常 长 ， 如 果 不 这 样 按 顺 序 罗 列 ， 将 来 要 想 找 到 为 某 个 元 素 应 用 样式 的 
某 条 规则 会 非常 麻烦 。 


测试 代码 


边 写 代码 边 调试 是 不 可 避免 的 。 什 么 是 调试 ? 调试 就 是 找 出 你 的 代码 没有 得 到 预期 
结果 的 原因 。 我 喜欢 一 句 话 , “调试 是 对 假定 的 系统 性 侵害 ”。 换 句 话 说 ,调试 过 程 
就 是 去 发 现 你 认为 代码 该 做 什么 与 代码 实际 上 做 了 什么 之 间 差 别 的 过 程 。 


为 此 , 确切 知道 某 个 HTML 元 素 被 应 用 了 哪些 CSS 规则 至 关 重 要 。 由 于 CSS 规则 会 
BÆ, ÍRE CSS 规则 都 可 能 设 定 同一 个 CSS 属性 , 但 最 终 这 个 属性 只 能 取得 一 个 值 。 
比如 ， 对 body 元 素 设 定 的 字体 样式 将 被 页 面 上 的 所 有 文本 元 素 继承 。 如 果 有 规则 为 
某 个 文本 元 素 设 定 了 另 一 种 字体 样式 ， 则 该 样式 就 会 覆盖 从 body 继承 的 样式 。 一 般 
来 说 ， 找 到 哪个 样式 胜出 并 非 易 事 ， 因 此 本 市 就 教 给 大 家 一 种 方法 ， 让 你 能 亲眼 看 
到 某 个 元 素 都 被 应 用 了 哪些 样式 ， 而 哪些 样式 又 是 最 终 起 作用 的 。 下 面 这 个 例子 是 
从 我 的 电子 书 Visual Stylin’ with CSS3 中 找 的 一 个 页 面 。 


如 图 A 所 示 , 在 浏览 器 (这 里 是 Safari ) 中 右键 单 击 一 个 元 素 , 然后 从 上 下 文 菜单 中 
选择 Inspect Element， 就 会 打开 Web Inspector。Web Inspector 同时 会 显示 HTML 元 
A (左下 面板 ) 和 该 元 素 接受 的 CSS 规则 ( 右 下 面板 )， 如 图 Br. 











这 里 的 CSS 清单 显示 ， 虽 然 为 p 元 素 设 定 了 Open Sans 字体 ， 但 这 个 字体 样式 被 上 
面 那 条 更 有 针对 性 的 .basic _ borders_ large.demo8 p 规则 覆盖 了 ， 看 到 那 条 删除 线 
ig? 因此， 其 中 的 文字 会 用 Niconne 字体 显示 。 在 HTML 面板 中 指定 一 个 元 素 ， 与 
之 相关 的 样式 就 会 出 现在 CSS 面板 。 


这 对 我 们 知道 某 个 元 素 到 底 都 接受 了 哪些 样式 确实 太 有 用 了 。 假 如 你 修改 了 一 个 样 
式 ， 但 元 素 并 没有 受 影 响 ， 那 你 就 该 打开 Web Inspector 看 一 看 ， 到 底 是 你 修改 的 规 
则 还 是 其 他 规则 在 实际 影响 该 元 素 。 看 完了 ， 单 击 左上 角 的 关闭 (x ) 按钮 ， 就 可 以 
退出 Web Inspector。 
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GIN 
Great minds discuss 


ideas; average minds 


[p 1225x181] [225x181] discuss events; small 


: : Back 
minds discuss people. Reload Page 













Great minds discuss 





Open in Dashboard... 


N View Source 


Figure 9: By setting a larger border Save Page As... ck 
sides, the tapers on the border corm Print Page... lei 


Here is the CSS for this figure Inspect Element N 





ideas; average minds 






discuss events; small 






minds discuss people. 



















v Styles 


"</ Lj 
<p>-</p> element.style { 
<figure> 
w«div class-"basic borders large demo8"> 


Matched CSS Rule: 













"Great minds discuss ideas; average minds discuss wcss3 borders figures.c. 
events; small minds discuss people. " .basic | borders. Hargs. demo8 p { 
<cite>Eleanor Roosevelt</cite> font-family: 'niconne', serif; 
</p> font-size: 1.75em; 
</div> > margin: 10px 9; 
text-align: center 





<!--Note that Figure: will be replaced on page load with 
e.g. Figure 10: - don't edit Figure: —» 
P» «figcaptions..«/figcaption» pi vswcss3 layout.css:232 
</figure> Hori Hettyt epen sars m sae 
<p> Here is the CSS for this figure.</p> A color: 8333; n 
P «figures..«/figure» 1) 





加 > Q hm 


图 A (右上 ) 右 击 元 素 并 选择 Inspect Element (PETR) ， 打 开 Web 
Inspector (或 在 安装 了 Firebug 的 Firefox 中 打开 “查看 器 ” ) 
图 B (下 ) ”选中 元 素 的 Web Inspector 界面 


body div#wrapper section#borders.top_content_level figure div.basic_borders_large.demo8 





我 个 人 还 是 推荐 Firebug, CA Firefox 的 一 个 扩展 。 通 过 Firebug 不 仅 能 查看 DOM 

结构 ， 还 能 调试 JavaScript。 要 安装 Firebug， di Firefox 49 "Firefox" X pit 
择 “Web 开发 者 ”> “获取 更 多 工具 ”， 然 后 在 “附加 组 件 ” 页 面 中 搜索 “Firebug”。 
找到 后 按照 简单 的 说 明 安装 即 可 。 


支持 旧版 本 浏览 
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HTMLS 和 CSS3 给 我 们 提供 了 那么 多 容易 实现 的 功能 , 那 自然 应 该 赶紧 使 用 而 不 管 旧 
版 本 浏览 器 是 否 支 持 这 些 新 功能 。 可 是 , 现实 是 残酷 的 ! 在 旧版 本 浏览 器 中 , 有 些 CSS3 
功能 可 能 只 是 没有 效果 而 已 ， 这 倒 简 单 ; 但 有 时 候 ， 某 些 CSS3 功能 可 能 导致 不 支持 
它们 的 浏览 器 出 现 显示 问题 。 比 如 display:table 和 boxsizing 属性 吧 ， 我 们 在 第 5 章 
介绍 过 , 用 它们 实现 多 栏 是 非常 方便 的 , 但 它们 在 下 6 IE 中 会 导致 布局 一 片 混乱 。 
因此 ， 在 旧版 本 浏览 器 中 测试 一 番 ， 然 后 为 相应 浏览 吕 提 供 后 备 代码 是 极 有 必要 的 。 


附录 ”技术 提示 


事实 上 ， 直 到 不 久 前 ， 浏 览 器 嗅 探 ( browser sniffing ) 都 是 检测 浏览 器 的 一 种 流行 方 
式 。 所 谓 浏 览 器 嗅 探 ， 就 是 通过 JavaScript 检查 浏览 器 的 用 户 代 理 字符 串 中 包含 的 浏 
览 器 名 字 ， 然 后 再 为 之 提供 能 够 弥补 不 足 的 代码 。 然 而 ， 我 们 实际 上 关心 的 并 非 浏 
览 句 ， 而 是 浏览 器 到 底 支 持 什么 功能 。 这 就 是 为 什么 现在 大 家 使 用 的 方法 都 不 再 关 
心 浏览 锅 ， 而 是 直接 检测 功能 的 原因 。 检 测 到 功能 缺陷 ， 再 有 针对 性 地 提供 后 备 代 
码 或 者 肛 子 脚本 ， 就 可 以 弥补 相应 能 力 的 不 足 。 


后 备 代码 
后 备 代 码 就 是 给 不 支持 CSS3 功能 的 旧版 本 浏览 器 提供 的 一 段 奉 代 性 代码 。 


最 简单 的 后 备 就 是 没有 后 备 ， 而 且 很 多 时 候 ， 喻 也 不 准备 都 没有 问题 。 比 如 ， 你 用 
了 CSS3 的 圆 角 功 能 ,IE6 和 TE7 A bo 0 £8 , 这 些 浏览 器 的 用 户 看 到 的 还 是 方 角 。 
这 个 结果 好 像 也 没什么 大 不 了 的 , 那些 用 户 也 许 根 本 不 知道 你 的 网 页 中 有 圆 角 效果 ， 
而 有 没有 圆 角 似乎 对 用 户 获取 信息 也 没 那 么 重要 。 不 过 ， 在 另外 一 些 情 况 下 ， 为 浏 
览 器 提供 后 备 CSS 代码 则 是 必需 的 。 


举 个 简单 的 例子 吧 , IE9 之 前 的 浏览 器 都 不 支持 多 背景 ， 因 此 后 备 代码 就 是 在 多 背景 
声明 之 前 简单 地 再 加 一 条 单 背景 声明 ， 比 如 : 








.someElement (background-image:url(images/basic image.jpg);] 
.someElement (background-image: 

url(images/cool image1.;jpg), 

url(images/cool image2.jpg), 

url(images/cool image3.jpg); 
} 
所 有 浏览 器 都 能 理解 第 一 条 规则 , 但 只 有 支持 多 背景 的 浏览 器 才 会 采用 第 二 条 规则 。 
如 果 某 浏览 絮 无 法 解析 某 条 CSS 规则 ,可 能 是 因为 它 不 支持 其 中 的 CSS 属性 或 者 声 
明 中 包含 错误 ,那么 它 就 会 跳 过 该 规则 ,接着 读 取 下 一 条 规则 。 因 此 ，IE8 及 更 早 版 
本 的 正 浏 览 器 会 忽略 第 二 条 规则 ， 而 只 呈现 basic_image.jpg。 


条 件 注释 
如 果 你 真 想 单独 为 下 浏览 器 做 点 什么 ,可 以 使 用 如 下 所 示 的 条 件 注释 来 添加 后 备 代码 


- 283 - 


附录 ”技术 提示 


<!--[if lte IE 8]> «!-- IE 条 件 注释 --> 

«link src="ie only.css" rel-"stylesheet" /> 

«1[endif]--» 

这 种 特殊 格式 的 HTML 注释 会 被 非 E MARA, EUR IE 浏览 器 才 会 执行 其 中 的 
代码 。 就 这 个 例子 而 言 ， 我 们 是 在 为 DIES 及 更 低 版 本 的 IE 加载 额外 的 样式 。 加 载 条 
件 可 以 使 用 lte (less than or equal to ， 小 于 等 于 )、1lt (lessthan, 小 于 )、gte ( greater 
than or equal to， 大 于 等 于 )、gt (greater than, KF )， 甚 至 只 写 一 个 浏览 器 版 本 号 
如 IE 6。 以 此 为 不 同 版 本 的 TE 提供 后 备 代 码 。 


有 时 候 , 浏览 器 可 能 根本 不 支持 你 需要 的 功能 。 此 时 , 仅 提 供 后 备 CSS 代码 还 不 够 ， 
还 需要 使 用 腻子 脚本 。 


腻子 脚本 


» 
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腻子 脚本 Cpolyfill) 指 的 是 一 段 JavaScript 代码 ， 能 够 赋予 浏览 器 未 曾 有 过 的 功能 。 
目前 ， 几 乎 所 有 CSS3 和 HTMLS 功能 都 有 各 自 对 应 的 腻子 脚本 ,包括 视频 回放 和 阴 
影 ， 从 而 让 那些 老 得 走 不 动 道 儿 的 “老家 伙 ” 们 也 能 闪现 青春 的 光芒 。 








Paul Irish 维护 了 一 个 完整 的 腻子 脚本 列表 ， 地 址 为 : https://github.com/Modernizr/ 
Modermizr/wiki/HTMLS-Cross-Browser-Polyfills 。 


要 在 页 面 中 添加 一 段 腻子 脚本 ， 首 先 要 下 载 并 将 其 保存 在 网 站 的 一 个 文件 夹 中 。 我 
为 此 创建 了 一 个 helpers 文件 来 。 然 后 ， 在 页 面 chead> 标 签 中 添加 一 个 cscript> 标 签 
把 它 加 载 进来 。 

«script type-"text/javascript" src-"helpers/selectivizr.js"» 

</script> 

怎么 确定 是 否 需要 某 个 腻子 脚本 呢 ? 推荐 大 家 使 用 Modernizr。Modernizr ( http:/ 
modernizr.com ) 是 一 个 JavaScript 文件 , 能 够 帮 你 检测 用 户 浏览 器 对 HTMLS 和 CSS3 
功能 的 文 持 情 况 ， 然 后 为 顶级 的 <htm1> 标 签 添加 一 组 类 ， 标 明 浏 览 器 文 持 什 么 功能 。 
另外 ， 它 还 会 设 定 一 个 JavaScript 对 象 modernizr 的 属性 ， 以 便 你 通过 JavaScript X 
测试 这 些 功 能 。Modernizr 添加 的 类 主要 是 为 CSS 提供 便利 。 


以 下 给 出 一 些 有 用 的 腻子 脚本 ， 供 大 家 参考 选用 。 


附录 ”技术 提示 


Q html5shiv.js ( http://code.google.com/p/html5shiv ): 让 IE8 及 更 低 版 本 的 IE 识别 
section, article, nav 等 HTML5 元 素 。 

口 selectivizr ( http://www.selectivizr.com ): 让 IE ( 6/7/8) 支持 ::first-child 等 高 级 
CSS 选择 符 。 

Q IE9.js ( http://code.google.com/p/ie7-js ): 修复 从 IE6 到 IE9 的 很 多 bug 和 缺损 
功能 。 

Q CSS3Pie ( http:/css3pie.com ); 让 IE6 到 IE9 支持 圆 角 、 背 景 渐 变 、 边 框图 片 、 盒 
阴影 、RGBa 颜色 等 可 视 化 的 CSS3 功能 。 

口 Respond.js ( https://github.com/scottjehl/respond ) 让 旧版 本 浏览 器 支持 媒体 查询 。 
口 -prefix-free( http://lea.verou.me/projects ) 为 需要 厂商 前 绥 的 CSS3 声明 添加 前 级 ( 参 
见 第 4 章 )。 

口 borderBoxModel,js〈https:/github.comy/albertogasparin/borderBoxModel ): 让 IE6 和 
IE7 支 持 CSS3 的 box-sizing 属性 。 











这 些 肛 子 脚本 都 是 我 最 常用 的 ,它们 对 弥补 Internet Explorer 的 不 足 和 缺失 尤其 有 用 。 
要 了 解 更 多 的 技术 提示 信息 ， 请 大 家 移 步 http:/www.stylinwithcss.com。 
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: :before 和 : :after 伪 元 素 , 49 
: :first-letter 伪 元 素 , 48 
: :first-line 伪 元 素 , 48 
:first-child, 47 

: focus HÆ, 46 
:last-child, 47 
:nth-child, 47 
:target 伪 类 , 46 
Qfont-face, 130 

(media, 263 

~, 34 

+, 34 

2,33 

absolute, 89 

aside, 250 
background, 95, 103 
background-attachment, 102 
background-color, 96 
background-image, 97 
background-position, 99 
background-repeat, 97, 98 
background-size, 101 
box-sizing, 169 

CSS3 变换 , 253 

CSS3 过 渡 , 220 
display, 94 

fieldset, 205 





figure, 223 
fixed, 90 

font, 120 
font-family, 113 
font-size, 115 
font-style, 118 
font-variant, 120 
font-weight, 119 
footer, 229 

form, 204 

Google Web Fonts, 131 
header, 229, 231, 232 
HTMLS 与 表单 , 201 
HTML 模板 , 7 
HTML 实体 , 18 
HTML 实体 引用 , 146 
ID 选择 符 ;39 

iPad, 261, 262 
iPhone, 261 

label, 206 
letter-spacing, 124 
line-height, 127 
Modernizr, 103 

nav, 250 
position, 87 
relative, 88 
section, 208 
static, 88 




































































































































































text-align, 126 继承 , 50 
text-decoration, 126 可 见 盒子 , 213 
text-indent, 122 块 级 元 素 , 10 
text-transform, 129 框架 图 , 228 
transition, 219 类 选择 符 , 36 

URL 占 位 符 , 186 连接 伪 类 , 44 
vertical-align, 129 链接 样式 , 26 
word-spacing, 125 默认 的 样式 表 , 51 
z-index, 224 排版 资源 , 148 

标记 , 2 能 入 样式 , 25 

标签 REJA, 15 

标题 , 5 上 下 文选 择 符 , 28 
段落 ,5 视 口 , 267 

复合 元 素 , 5 数字 值 , 57 

根 级 标签 , 7 谈 谈 媒体 查询 , 265 
不 要 乱用 类 , 42 寺 指 度 , 54 
布局 高 度 , 157 提示 条 , 220 

布局 宽度 , 157 外 包装 , 229 

ES, 51, 52 为 文档 添加 样式 的 三 种 方法 , 25 
查理 版 简单 层 辣 要 点 , 55 习 住 浮动 元 素 , 80 
常规 文档 流 , 77, 81, 87, 88, 90, 92 文本 阴影 , 245 
RIRS, 105 文本 值 , 56 

垂直 居中 , 241 文档 对 象 模型 , 19 
定位 上 下 文 , 91 响应 式 设 计 的 要 素 , 263 
断 点 , 266 行内 样式 , 25 

非 首位 子 元 素 , 187 行内 元 素 , 10 

浮动 , 78 颜色 值 , 58 

负 外 边 距 , 175 溢出 , 193 

关闭 标签 , 3 隐藏 , 193 

关于 <title> 标 签 , 8 用 于 页 内 导航 的 ID, 39 
关于 表现 性 标记 的 思考 , 165 预防 过 大 的 元 素 , 171 
关于 颜色 的 一 些 资料 , 61 属性 , 4 

盒 模型 , 63-64 遇 性 选择 符 , 42 

盒 阴 影 , 235 子 - 星 选择 符 , 168 

弧 形 角 , 234 
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CSS: 设计 


市 面 上 讲 CSS ( 乃至 CSS3 ) 的 书 和 不 少 ， 但 像 本 书 这 
样 适合 从 入 门 到 提高 的 好 书 并 不 多 见 多 无 论 你 是 第 一 次 接 
触 CSS， 还 是 已 经 有 了 一 定 的 经 验 ， 这 本 书 都 会 为 你 在 
Web 设 计 领 域 登 堂 入 室 打 下 坚实 的 基础 ! 

第 3 版 仍旧 延续 之 前 备 受 筠 誉 的 写作 风格 和 特色 ， 全 
ub da 以 实例 辅助 讲解 ， 组 织 方式 平易 朴 

、 要 点 陈述 通俗 易 懂 。 既 有 对 CSS 规 则 、 声 明 、 层 又 、 
Rd 选择 符 等 基本 概念 的 耐心 解读 ， 又 有 对 盒 模型 、 
界面 组 件 、 页 面 布局 等 核心 技术 的 精彩 阐释 , 读 来 引 人 入 

令 人 欲罢不能。 此 外 ,WN 本 书 还 涵盖 了 HTIML5 和 CSS3 
的 新 功能 ， 包 括 新 增 的 HTML 元 素 以 及 用 圆 角 、 阴 影 、 渐 
变 、 多 图 片 背 景 等 进行 视 庙 设计 ， 另 有 专门 地 章 讲解 最 前 
沿 的 响应 式 设计 。 

只 要 能 把 本 书 读 懂 、 吃 下， 自称 “CSS 老 手 ” 绝 对 没 
人 敢 说 你 吹牛 皮 。 要 是 能 将 书 中 给 出 的 建议 和 提示 融会 贯 
通 地 运用 到 自己 的 项 目 中 ， 那 么 “CSS 高 手 ” 这 顶 桂冠 也 
将 非 你 莫 属 ! 
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